Некоторые проблемы с отображением 4 элементов <li> в двух столбцах

0

Я нахожу некоторые трудности, чтобы сделать следующее, используя 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

Теги:
css-float
xhtml

2 ответа

1
Лучший ответ

Попробуйте дать ему ширину 46%.

При использовании 2% отступов-левых и 2% от заполнения справа, общая сумма составляет 50%, на самом деле составляет 54%;)

1

Причина, по которой вы видите их в одном ряду, - ширина. 50% + 4%, и нет места для 2 в одной строке. поэтому измените ширину на <48%.

однако это не будет полным решением, первые 2 элемента будут на одной строке, а не на той же строке, какой вы хотите, чтобы исправить это, вы можете изменить разметку или разбить на 2 списка.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню