Встраиваемые элементы CSS

Я хочу, чтобы структура навигации была в заголовке моей страницы, поэтому я решил использовать встроенный список, но результат, который он производит, - это не то, что я себе представлял. Он размещает элементы на 3 отдельных строках.Встраиваемые элементы CSS

Element 1 Element 2 Element 3

Выше к чему я стремлюсь достичь, однако в настоящее время я получаю,

Element 1 
Element 2 
Element 3

Это мой CSS и HTML сниппеты:

CSS

#nav li { 
    display: inline; 
}

HTML

<ul id="nav"> 
    <li><button id="left_nav"><</button></li> 
    <li><div id="day">Monday</div></li> 
    <li><button id="right_nav">></button></li> 
</ul>

Спасибо.

источник

2013-03-20 Shannon Rothe

Вы можете разместить HTML и CSS вы используете? – drewinglis

Вы пробовали 'display: inline'? –

Нам нужно увидеть ваш HTML/CSS –

Используйте встроенный блок вместо встроенного, вы также можете использовать это, поплавок ...

По встроенный блок ,

#nav li { 
    display: inline-block; 
}

По Float,

#nav { 
     overflow:hidden; 
} 
#nav li { 
     float:left; margin-right:10px; 
}

источник

2013-03-20 04:54:03 SaurabhLP

Спасибо! Однако как я могу отдельно изменить положение элементов сейчас? Я размещал элементы внутри li, но все еще не двигался. –

- размер контейнера, где ul меньше размера, который вы хотите ...? см. редактирование, которое я сделал ... – SaurabhLP

Я получил его, спасибо! –

Добавьте к этому CSS для вашего LI в ...

li{ display:inline; }

источник

2013-03-20 04:50:44 advermark

У меня есть то, что он производит то, что я сказал, что он производит. –

Опубликуйте свой HTML и CSS в своем сообщении, чтобы мы могли видеть, что вы сделали до сих пор. – advermark

Там мы идем, обновляем OP. –

Использование

#nav li { 
    display: inline-block; 
}

Демо: Fiddle

источник

2013-03-20 04:54:48

Попробуйте использовать следующее:

#nav li { 
    list-style: none; 
    float: left; 
    margin-right: 5px; 
}

источник

2013-03-20 04:54:59

float:left использование или float:right совмещен бок о бок

#nav li { 

float:left; 

}

источник

2013-03-20 04:55:27 sasi

У вас есть buttons и div внутри li дать width до div и button, которые будут работать.

Потому что div является элементом уровня блока и использует все width страницы, если вы не назначаете фиксированную ширину.

ИЛИ

применяются float: left; к li, что тоже будет работать.

источник

2013-03-20 04:56:31

Добавить CSS:

#navigation ul 
{margin:0px; padding:0px;} 

#navigation ul li 
{display:inline; height:30px; float:left; list-style:none; margin-left:15px;}

источник

2013-03-20 04:58:29 Rakesh

структура различна для разных пользователей. Проверьте ссылку: http://jsfiddle.net/wWyMW/1/

<div id="nav"> 
    <ul> 
     <li> 
      <a href="#">Element <span>1</span></a> 
      <div class="clr"></div> 
     </li> 
     <li> 
      <a href="#">Element <span>2</span></a> 
      <div class="clr"></div> 
     </li> 
     <li> 
      <a href="#">Element <span>3</span></a> 
      <div class="clr"></div> 
     </li> 
    </ul> 
    <div class="clr"></div> 
</div>

And The CSS:

*{ matgin:0; padding:0} 
ul, li{ list-style:none} 
a{ text-decoration:none} 
.clr{ clear:both;} 
#nav{margin:auto; width:960px;} 
#nav ul li{ float:left; margin-left:10px} 
#nav ul li:first-child{ margin-left:0} 
#nav ul li a{ display:block; background:#f00; color:#0F0; line-height:30px; text-align:center; width:70px; padding:0px 10px; font-weight:bold;} 
#nav ul li a span{ display:block; float:right;}

источник

2013-03-20 05:06:45 Hassaan

Встраиваемые элементы CSS

ответ

Смежные вопросы