Question

Fiddle

我无法水平对齐中心<ul>菜单，它左侧浮动。我可以使用margin-left并给出200px左右的硬编码值sych（当说，margin-left：40％和margin-right：40％时出现同样的问题，这次边距试图保护它们的宽度因此它们会降低当pahe宽度足够小时，ul向下，然后就可以了，但我希望它自动对齐到中心，即使调整大小（响应）。 CSS: Horizontal UL: Getting it centered不是解决方案，因为我的菜单应该向左浮动，在菜单栏中并不是唯一的。我希望很清楚

Answer 1

通过这个声明：

我的菜单应向左浮动，菜单栏中并不是唯一的

我相信你的错误实际上是你的错误前提。您不需要浮动元素以使它们保持内联。如果您要保持p和ul并排，请更改其display属性。

浮动会删除以元素为中心的功能，但例如display: inline-block允许您使用text-align: center水平对齐父元素：

See updated fiddle

    #top-bar{
        width: 100%;
        min-height: 35px;
        background-color: #D3D3D3;
        font-family: helvetica, sans-serif;
        text-align: center;
    }

    #top-bar p{
        margin:0;
        padding-top:10px;
        padding-left:10px;
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
    }

    #top-bar ul{
        margin: 10px auto 0 auto;
        horizontal-align: center;
        border: 1px solid black;
        border-radius: 5px;
        display: inline-block;
        vertical-align: middle;
    }

Answer 2

浮点元素出现问题。试试这个：

#top-bar p {
  /* Try */
  position: absolute;
}

#top-bar ul {
  float: left; /* Delete this one */
  horizontal-align: center; /* Delete this one */
  position: relative;
  width: 50%; /* Adjust at your need */
}

#top-bar li {
 float: left; /* Delete */
 display: inline-block;
 position: relative;
}

如何水平对齐中心<ul>用作左侧浮动的菜单？</ul>

2 个答案: