Выравнивание объектов от края страницы

233

20 февраля 2019, 17:10

Вывожу на страницу элементы списка под соответствующими заголовками, но столкнулся с тем, что при команде margin отступ идет не от края страницы браузера, а от предыдущего блока. Поэтому столбцы съезжают, если использовать объекты разной длины.

Как выровнять столбцы от края страницы, не используя форматирование таблицей?

        <span style = "margin-left: 75px">
    <%
        out.print(gm.getGenre() + ";");
    %>
    </span>
    <span style = "margin-left: 75px">
    <%
        out.print(gm.getName() + ";");
    %>
    </span>
    <span style = "margin-left: 90px">
    <%
        out.print(gm.getPrice());
    %>

Answer 1

Может быть таблицы устарели но на мой взгляд это делать лучше таблицами

<table align="center" cellpadding="10px"> 
  <thead> 
    <tr> 
      <td>Жанр</td> 
      <td>Название</td> 
      <td>Цена</td> 
    </tr> 
  </thead> 
  <tr> 
    <td>Lorem</td> 
    <td>Lorem Ipsum</td> 
    <td>$5</td> 
    <td><button>кнопка</button></td> 
  </tr> 
  <tr> 
    <td>Lorem</td> 
    <td>Lorem Ipsum</td> 
    <td>$12</td> 
    <td><button>кнопка</button></td> 
  </tr> 
  <tr> 
    <td>Lorem</td> 
    <td>Lorem Ipsum</td> 
    <td>$71</td> 
    <td><button>кнопка</button></td> 
  </tr> 
</table>

Answer 2

Может быть подойдёт flexbox

.flex { 
  display: flex; 
  justify-content: space-around; 
  text-align: center; 
} 
 
.flex:nth-of-type(1) { 
  border-bottom: 1px solid #ccc; 
} 
 
.flex span { 
  width: 100%; 
}

<div class="flex"> 
  <span>жанр</span> 
  <span>название</span> 
  <span>цена($)</span> 
  <span><button style="opacity:0;pointer-events:none;">удалить</button></span> 
</div> 
<div class="flex"> 
  <span>рок</span> 
  <span>кино</span> 
  <span>12($)</span> 
  <span><button>удалить</button></span> 
</div> 
<div class="flex"> 
  <span>классика</span> 
  <span>шуберт</span> 
  <span>21($)</span> 
  <span><button>удалить</button></span> 
</div>