Html 将浮球置于div内的ul居中

Html 将浮球置于div内的ul居中,html,css,Html,Css,我正试图将这个底部导航集中在一个测试站点上: ul li使用浮点:左这就是我认为让它停留在左边的原因。我正在想办法让它居中 要使链接水平显示,我需要将它们向左浮动,但现在我无法使整个导航居中。有办法吗?经常使用: .divStyle { text-align: center; } ul.styleName { margin: 0 auto; text-align: left; } 我会成功的 像这样在ul的左右两侧应用“自动”边距将使其在div中居中,只要div将文

我正试图将这个底部导航集中在一个测试站点上:

ul li使用
浮点:左这就是我认为让它停留在左边的原因。我正在想办法让它居中

要使链接水平显示,我需要将它们向左浮动,但现在我无法使整个导航居中。有办法吗?

经常使用:

.divStyle {
    text-align: center;
}
ul.styleName {
    margin: 0 auto; 
    text-align: left;
}
我会成功的

像这样在ul的左右两侧应用“自动”边距将使其在div中居中,只要div将文本居中。这是有多少网站将div作为其页面的主要内容作为中心。

CSS:

margin: 0px auto;


为了使
margin:0 auto
正常工作,您需要在ul上设置一个宽度并移除
显示:inline

#footerLinks ul {
  list-style:none;
  margin:0 auto;
  padding:0;
  width:400px;
}

这里是我如何解决它的,也是动态生成的菜单

假设这是动态生成的菜单:

<div id="menu">
   <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
   </ul>
</div>
现在,要使列表居中,需要添加一个空段落以清除浮动。如果菜单是静态的或使用
jQuery
这样的方式,您可以手动执行此操作:

$(document).ready(function() {
    $("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
就这样

  • style=“text align:center;”“
    添加到ul的父div
  • style=“display:inline table;”“
    添加到ul

  • 嗯,我认为接吻规则适用于这里:

    ul { text-align: center; }
    ul li { display: inline-block; }
    

    由于您浮动了所有列表项,ul的高度为零,宽度为100%。您可以删除ul上的显示:inline,然后使其具有固定的中心宽度(宽度:500px),虽然这是一个有点黑客,因为ul没有正确设置它的盒子宽度问题是宽度需要是动态的问题是宽度需要是动态的。
    $(document).ready(function() {
        $("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
    })
    
    p.clear{
        clear:both;
        margin:0;
        padding:0;
        height: 0;
        width: 0;
    }
    
    ul { text-align: center; }
    ul li { display: inline-block; }