Как сделать так, чтобы плавающие элементы div заполняли пространство

Я пытаюсь создать панель рабочего процесса на веб-странице.

Элементы рабочего процесса могут иметь разную длину.

Элементов может быть достаточно, чтобы заполнить всю ширину экрана, поэтому поток должен переноситься на следующую строку.

Для этого я использую левые плавающие элементы div.

Тем не менее, я бы хотел, чтобы divs занимали соответствующую ширину экрана.

Если только три элемента могут поместиться в одну строку, я бы хотел, чтобы эти элементы равномерно помещались в строке с учетом ширины каждого отдельного элемента.

Все, что я могу получить на данный момент, это то, что последний div в строке заполняет оставшееся пространство, что часто означает, что все мои элементы выровнены по левому краю, например. Я могу получить такой макет:

AAAA -> BBBBB ->
CCCCCCCCCCCCCCCCCCC -> DD -> EEE ->
FFFFF -> GGGG -> HHHHH

но я на самом деле хочу, чтобы это выглядело примерно так:

      AAAA   ->   BBBBB  ->
CCCCCCCCCCCCCCCCCCC  -> DD -> EEE ->
   FFFFF ->  GGGG ->  HHHHH

если вы понимаете, что я имею в виду.

Нужно ли использовать для этого таблицы, а не плавающие элементы div?


html css css-float
person A_M    schedule 28.11.2008    source источник
comment
Я думаю, что ваша диаграмма бесполезна, похоже, вы хотите, чтобы все было по центру... но на самом деле вы хотите, чтобы все элементы заполняли ширину страницы...   -  person inspite    schedule 28.11.2008

Ответы (6)


arrow_upward
1
arrow_downward

просто пара других указателей. У вас не должно быть пустых тегов li, это неправильно семантически. Также в идеальном мире вы должны не указывать имена макетов атрибутов id .

Лично я бы поместил начальное изображение на ul, а затем поместил бы заключительное изображение на последний li.

person John Polling    schedule 28.11.2008

arrow_upward
1
arrow_downward

вероятно, было бы полезно увидеть окружающую разметку, чтобы понять, какие элементы у вас есть. Вы можете попробовать окружающий div с margin: 0 auto;

Вам, вероятно, понадобится окружающий div для каждого уровня.

person John Polling    schedule 28.11.2008

arrow_upward
0
arrow_downward

Не теряйте время, просто зайдите сюда:

http://www.cssmenubuilder.com/build-breadcrumb-menu

person inspite    schedule 28.11.2008

arrow_upward
0
arrow_downward

Спасибо за оперативные ответы. Я попробую то, что вы предлагаете.

В настоящее время я пытаюсь сделать это с помощью списка, хотя с div у меня тоже ничего не получилось.

Я попытался извлечь некоторые HTML из моих JSP, чтобы попытаться продемонстрировать, что я делаю с этим.

У промежутков есть класс «навигация», который в основном рисует фоновое изображение вокруг текста, чтобы он выглядел как кнопка, а также устанавливает поля/отступы/и т. д. Я опустил CSS, который напрямую связан с отрисовкой кнопки, так как это стандартный фреймворк в нашей системе для отрисовки кнопки. Я включил используемый мной CSS, который напрямую связан с рабочим процессом.

Я пытаюсь нарисовать начальное изображение перед первой кнопкой, а затем нарисовать фоновые изображения за каждой кнопкой, чтобы провести линию между каждой кнопкой для представления потока. Затем у меня есть конечное изображение в конце потока.

<html>
<body>

<STYLE>
#nav, #nav ul {
    list-style: none;
    margin: 0px;
    width: 700px;
}

#nav li {
    list-style: none;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    background-image: url(/lookandfeel/images/navMenuDiv.gif);
    background-repeat: repeat-x;
}

li#ending {
    background-image: url(/lookandfeel/images/navMenuRight.gif);
    background-repeat: no-repeat;
}

li#start {
    background-image: url(/lookandfeel/images/navMenuLeft.gif);
    background-repeat: no-repeat;
}

.navigation a {
  background-image: url(/pdr/images/navigation.gif);
}
</STYLE>

<ul id="nav" style="width: 100%;border: 1px solid">
  <li id="start" />
  <LI >
    <SPAN class="navigation" >AAAAAAAAAA</SPAN>
  </li>
  <LI >
     <SPAN class=navigation >BBBB</SPAN>
  </li>
  <LI >
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>DDDDDDDDD</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>EEEEEEEE</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
  </li>
  <li>
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
  </LI>
  <li id="ending" />
  </ul>
</body>
</html>
person A_M    schedule 28.11.2008

arrow_upward
0
arrow_downward

Установка для элементов li значения display: inline и присвоение ul свойству text-align: justify частично поможет вам в этом (по крайней мере, в FFX3 и IE7). Однако это вызывает некоторые сложности при применении фоновых изображений.

person AaronSieb    schedule 28.11.2008

arrow_upward
0
arrow_downward

Как бы мне не хотелось говорить, что что-то невозможно сделать, я думаю, что должен согласиться с @johnners по поводу окружающего элемента для каждого уровня навигации. Даже если вы будете использовать CSS макета таблицы, вам понадобится какой-то окружающий элемент для каждой «строки», чтобы получить правильное расстояние слева и справа.

person Bryan J Swift    schedule 09.12.2008