Я нахожу некоторые трудности, чтобы сделать следующее, используя HTML и CSS.
У меня есть эта страница: http://www.onofri.org/example/example4/
Как вы видите, есть ящик с заголовком "СОЗДАНИЕ ПОЛИТИКИ ДЛЯ СОДЕЙСТВИЯ ИНВЕСТИЦИЯМ", созданный #policyFrameworkBox div
В этом поле у меня есть неупорядоченный список с 4 <li>
элементами внутри него с class="floattedList"
Я хочу, чтобы этот элемент li
состоял из двух столбцов:
первый и второй элементы li
в одной строке, а третий и четвертый li
- во второй строке.
Для этого я пытался выполнить следующую операцию:
#policyFrameworkBox li{
font-size: 11px;
color: #004673;
font-family: Verdana;
font-weight: bold;
padding-left: 2%;
padding-right: 2%;
float: left;
width: 50%;
}
На практике я пытаюсь поместить элемент li
чтобы быть рядом друг с другом, и я установил ширину на 50%, поэтому два элемента li
занимают все пространство, так что идите в голову и посмотрите остальные два элемента li
во второй строке.
Но не работают, и элементы li
все еще отображаются в столбце
Зачем? Что мне делать, чтобы показать первый li
рядом со вторым li
на первой строке, а третий li
рядом с четвертым li
во второй строке?
Tnx
Andrea
Попробуйте дать ему ширину 46%.
При использовании 2% отступов-левых и 2% от заполнения справа, общая сумма составляет 50%, на самом деле составляет 54%;)
Причина, по которой вы видите их в одном ряду, - ширина. 50% + 4%, и нет места для 2 в одной строке. поэтому измените ширину на <48%.
однако это не будет полным решением, первые 2 элемента будут на одной строке, а не на той же строке, какой вы хотите, чтобы исправить это, вы можете изменить разметку или разбить на 2 списка.