将<ul> <li>放入div中

经过一番search之后,我没有find正确的方法将<li>的列表放在固定宽度的div

看看网页 ..它也不工作!

14 Solutions collect form web for “将<ul> <li>放入div中”

由于ulli元素display: block默认情况下为display: block – 给它们自动边距和比它们的容器小的宽度 。

 ul { width: 70%; margin: auto; } 

如果你已经改变了他们的显示属性,或者做了一些覆盖正常alignment规则的东西(比如浮动它们),那么这是行不通的。

以ul为中心, 同样也有以li为中心的元素 ,并使ul的宽度dynamic变化,使用display:inline-block; 并把它包装在一个居中的div。

 <style type="text/css"> .wrapper { text-align: center; } .wrapper ul { display: inline-block; margin: 0; padding: 0; /* For IE, the outcast */ zoom:1; *display: inline; } .wrapper li { float: left; padding: 2px 5px; border: 1px solid black; } </style> <div class="wrapper"> <ul> <li>Three</li> <li>Blind</li> <li>Mice</li> </ul> </div> 

更新

这是一个jsFiddle链接到上面的代码。

脚步 :

  1. 写作style="text-align:center;"ul父母div
  2. 写入style="display:inline-table;"ul
  3. 写作style="display:inline;"li

或使用

 <div class="menu"> <ul> <li>item 1 </li> <li>item 2 </li> <li>item 3 </li> </ul> </div> <style> .menu { text-align: center; } .menu ul { display:inline-table; } .menu li { display:inline; } </style> 

可能是

 div ul { width: [INSERT FIXED WIDTH] margin: 0 auto; } 

要么

 div li { text-align: center; } 

取决于它应该是什么样子(或结合)

这是以任何DIV容器为中心UL的更好的方法。

此CSS解决scheme不使用宽度和浮动属性。 浮动:左和宽度:70%,当你需要在不同菜单项目的不同页面上复制你的菜单时,会令你头疼。

我们使用填充和边距来确定文本/菜单项周围的空间,而不是使用宽度。 另外,不要在LI元素中使用Float:Left,而应使用display:inline-block。

通过将你的LI留下来,你可以将你的内容向左移动,然后你必须使用上面提到的Hacks中的一个来使你的UL居中。 显示:inline-block为你创build你的Float属性(sorting)。 它把你的LI元素变成一个块元素,并排放置(不是浮动的)。

通过响应式devise和使用Bootstrap或Foundation之类的框架,在尝试浮动和居中内容时会出现问题。 他们有一些内置的类,但最好从头开始。 此解决scheme对于dynamic菜单(如Adobe Business Catalyst菜单系统)要好得多。

本教程的参考资料可在以下urlfind: http : //html-tuts.com/center-div-image-table-ul-inside-div/

HTML

 <div class="container"> <ul> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </div> 

CSS

 .container { text-align: center; border: 1px solid green; } .container ul { border: 2px solid red; display: inline-block; margin: 10px 0; padding: 2px; } .container li { display: inline-block; } .container li a { display: inline-block; background: #444; color: #FFF; padding: 5px; text-decoration: none; } 

为了居中块对象(例如ul ),需要在其上设置宽度,然后可以将该对象的左右边距设置为自动。

要将块对象​​的内联内容居中(例如li的内联内容),可以设置css属性text-align: center;

尝试

 div#divID ul {margin:0 auto;} 

只需添加text-align: center; 到你的<ul> 。 问题解决了。

有趣的,但尝试这与ul里面的浮动li元素: 这里的例子

现在的问题是:ul需要一个固定的宽度才能真正坐在中心。 但是我们想要相对于容器的宽度(或dynamic),ul上的margin:0 auto不起作用。

更好的方法是放开UL / Li列表,并在这里使用不同的方法示例

另一个select是:

HTML

 <nav> <ul class = "main-nav"> <li> Productos </li> <li> Catalogo </li> <li> Contact </li> <li> Us </li> </ul> </nav> 

CSS:

 nav { text-align: center; } nav .main-nav li { float: left; width: 20%; margin-right: 5%; font-size: 36px; text-align: center; } 

如果你知道ul的宽度,那么你可以简单地将ul的边距设置为0 auto;

这将使ul在包含div的中间alignment

例:

HTML:

 <div id="container"> <ul> <li>Item1</li> <li>Item2</li> </ul> <div> 

CSS:

  #container ul{ width:300px; margin:0 auto; } 

这是我能find的解决scheme:

 #wrapper { float:right; position:relative; left:-50%; text-align:left; } #wrapper ul { list-style:none; position:relative; left:50%; } #wrapper li{ float:left; position:relative; } 
 <div id="container"> <table width="100%" height="100%"> <tr> <td align="center" valign="middle"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </td> </tr> </table> </div> 

使用oldschool中心标签

 <div> <center> <ul> <li>...</li> </ul></center> </div> 

🙂

  • 如何防止Unicode字符从JavaScript呈现为HTML中的表情符号?
  • 无论内容如何,​​强制表格列的宽度始终是固定的
  • 如果没有JavaScript,当长一个不合适时,我可以显示不同的文字吗?
  • 将页脚定位在具有固定页眉的页面底部
  • 如何在提交之前添加额外的字段forms?
  • 我可以在css中指定maxlength吗?
  • 任何所见即所得的富文本编辑器不使用HTML(contenteditable或designMode),一个la(新的)Google文档?
  • CSS水平表单元格间距:怎么样?
  • 上次保证金/填充折叠在flexbox中
  • 打开新浏览器窗口的最佳方法是什么?
  • 使div填充剩余*水平* flexbox中的空间