Добавить кнопку в одну строку с элементом списка

317

07 февраля 2019, 04:30

Необходимо вывести список элементов (List Java), напротив каждого из которых по центру страницы должна висеть кнопка "удалить". Впервые столкнулся с CSS, поэтому использовал готовую библиотеку w3schools. Добавил строчку inline-block, но все равно кнопки располагаются под элементами, а не напротив них.

.list{display:inline-block;}

<div class="list">
<div class="w3-container w3-left-align">
<br />
<%
   List<StandartGame> games =  (List<StandartGame>) 
   request.getAttribute("allGames");
   if (!games.isEmpty() || games!=null) {
    for (StandartGame gm : games) {
        out.print("<li>" + gm.getGenre() + "; " + gm.getName() + "; " + 
        gm.getPrice() + "</li>");
%>
<%--Добавляем кнопку "удалить"--%>
<div class="w3-container w3-center">
    <button class="w3-button w3-round-large w3-blue-gray" 
onclick="location.href='/'">удалить</button>
</div>
<%--Возвращаемся в foreach--%>
<%
    } <%--Вышли из foreach--%>
} else out.print("КАТАЛОГ ПУСТ");
%>
</div>
</div>

Answer 1

Дело в том, что тег DIV в HTML без дополнительных обработок - это блочный элемент и все, что в нем содержится будет отображаться как бы с новой строки.

Поэтому, если хотите получить результат с кнопкой на той же строке, попробуйте заменить div на другой не блочный элемент, например, span

* {margin: 0; padding: 0 }

<div class="list"> 
<div class="w3-container w3-left-align"> 
<br /> 
<li>Item 1 <span class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</span></li> 
<li>Item 2 <span class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</span></li> 
<li>Item 3 <span class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</span></li> 
<li>Item 4 <span class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</span></li> 
 
</div> 
</div>

Или же присвоить div'у не блочный стиль. Например,

* {margin: 0; padding: 0 } 
 
.w3-container { 
  display: inline; 
}

<div class="list"> 
<div class="w3-container w3-left-align"> 
<br /> 
<li>Item 1 <div class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</div></li> 
<li>Item 2 <div class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</div></li> 
<li>Item 3 <div class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</div></li> 
<li>Item 4 <div class="w3-container w3-center"> 
    <button class="w3-button w3-round-large w3-blue-gray"  
onclick="location.href='/'">удалить</button> 
</div></li> 
 
</div> 
</div>

Answer 2

Попробуйте поставить display:inline; Самой кнопке и тексту, а не общему блоку.