<div> вызывает разрывы строк?

Question

У меня есть строка меню, и я хочу создать div для каждого элемента меню, чтобы они были по горизонтали отдельно на 5 пикселей. Как мне это сделать?

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

Answer 1

divs являются блочными элементами по умолчанию. Вы можете изменить это в CSS

 display:inline

но вам может быть лучше использовать список и CSS для достижения желаемого.

<style>
   .mymenu{
      list-style:none; 
   }
   .mymenu li{
      display:inline;
      etc
   }
</style>
<ul class="mymenu">
    <li>Item</li>
    <li>Item</li>
</ul>

Answer 2

По умолчанию <DIV> вызывает разрыв строки.

Вы, вероятно, хотите использовать <SPAN>.

Answer 3

<span> - это то, что вы ищете

Специально для меню вы можете взглянуть на выпадающие меню suckerfish

Answer 4

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

.

Answer 5

display: inline;

Answer 6

если вы используете span, вы не можете использовать верхнее и нижнее поля, и ваши пункты меню будут разбиты по линиям (очень некрасиво, если у них также есть граница). Я рекомендую теги с плавающим блоком A, которые компактны и прекрасно работают с браузерами в текстовом режиме.

<style>
#menu a {display: block; border: 1px solid blue; padding 5px; float: left; margin-right: 5px;}
</style>
<div id="menu">
  <a href="/1/">Item 1</a> <a href="/2/">Item 2</a>
  <div style="clear:left"></div>
</div>

Answer 7

is display: block - как правило, он формирует область вокруг вашего контента, и после него вы получите что-то вроде переноса строки (хотя это не разрыв строки, именно потому, что 'div' и 'line' не являются концепции, которые идут вместе). is display: inline, что означает, что его содержимое передается (то есть оборачивается) в абзаце, как выделение жирным или курсивом. Это даже не всегда принимает форму коробки: представьте This is a paragraph and <span> this is a highlighted section.</span> , которому нужны два поля для описания составного встроенного элемента (установите границы, чтобы увидеть, как он выглядит). Возможно, вы захотите использовать блочные элементы для меню, потому что размер блока упрощает выравнивание по высоте (и, по желанию, ширине) элементов меню - встроенные элементы могут оставить вас с переменной высотой и шириной - значительно упростив ситуацию , С блочными элементами используйте float: left, чтобы расположить их рядом друг с другом по горизонтали. Но есть так много сложностей и мнений по этому поводу, что вам лучше изучить ситуацию более тщательно - я рекомендую http://www.alistapart.com/ для начинающих, в которых есть несколько проработанных примеров меню.

Answer 8

Да, обычно. Попробуйте