内联元素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 2013-03-20 04:50:14

你试过'display：inline'吗？ – 2013-03-20 04:50:51

我们需要查看您的HTML/CSS – 2013-03-20 04:50:53

使用inline-block的，而不是在线，您也可以通过浮动使用此...

通过inline-block的 ，

#nav li { 
    display: inline-block; 
}

通过浮动，

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

来源

2013-03-20 04:54:03 SaurabhLP

谢谢！但是，我现在怎样才能单独修改元素的位置？我在里面漂浮了元素，但仍然没有任何动作。 – 2013-03-20 05:00:19

是容器的大小，其中ul是否小于所需大小...？看到我编辑的编辑... – SaurabhLP 2013-03-20 05:03:26

我明白了，谢谢！ – 2013-03-20 05:06:21

它添加到CSS的贵丽的......

li{ display:inline; }

来源

2013-03-20 04:50:44 advermark

我有这个，它产生我说的它产生的。 – 2013-03-20 04:51:03

在你的文章中发布你的HTML和CSS，以便我们可以看到你迄今为止做了什么.. – advermark 2013-03-20 04:52:19

我们去了，更新OP。 – 2013-03-20 04:53:18

使用

#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>

和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

回答

相关问题