0

我知道很多人都尝试过这样做，并制定了一些刚刚成功的系统，或者只是为了“过关”，但是最好的方法是什么？我有一些几乎完整的东西，但由于某种原因，徽标没有居中，而是整个 ul 为一个整体。这就是我得到的。

在此处输入图像描述

但是，当文本长度相同时，这是我得到的：

在此处输入图像描述

这是我的html：

<div class="navbar">

    <ul>

        <li>
            <a class="navbarLinks" href="#">Big Text Here</a>
        </li>

        <li>
            <a class="navbarLogo" href="/"><img src="images/logo.png" width="100"></a>
        </li>

        <li>
            <a class="navbarLinks" href="#">Small Text</a>
        </li>

    </ul>

    <div class="divider"></div>

</div>

我的CSS：

.navbar
{
    margin:0 auto;
    text-align: center;
    z-index: 9999;
    margin-top: 10px;
}

.navbar ul
{
    display: inline-block;
    list-style-type: none;
    margin:0 auto;
    padding: 0px;
}

.navbar li
{
    display: inline-block;
    list-style-type: none;
    vertical-align: middle;
}

.navbarLinks
{
    color:#ccc;
    margin: 20px;
    text-align:center;
    display:block;  
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-decoration: none;  
    font-family: arial;
    font-size: 20pt;
    font-weight: bold;
}

.navbarLinks:hover
{
    color:#fff;
}

.navbarLogo
{
    padding-bottom: 0px;
    text-align: center;
}

如何修复我的代码？

4

1 回答 1

0

最简单的方法，尽管是一个巨大的 hack，就是只给左右<li>一个百分比width，比如 40% 左右。然后它们将保持相同的大小，同时在中间为徽标留出一点空隙。

最好的方法是使用 flexbox，它可以让你明确说出你想要什么，即在两个文本部分之间分割任何额外的空间：

.navbar ul {
    display: flex;
}
.navbar li.navbarLinks {
    flex: 1;
}

这只是说：ul应该是一个 flexbox（意味着它的所有孩子都应该排成一排并填充可用空间），并且任何额外的空间都应该以 1:1 的比例分配给链接。

这是一个糟糕的小提琴。

缺点是这只适用于最近的浏览器，特别是 IE10 是第一个支持它的 IE。 并且已经对语法进行了三个修订，因此您也需要支持这些修订，也许使用类似Sass flex mixin的东西（即使您正在编写静态 CSS，它也是一个有用的参考）。

另一方面，您可以同时使用这两种方法。不理解 flexbox 的浏览器会遵循这个规则inline-block，只会看到一个稍微偏离中心的徽标。

于 2013-11-05T00:19:46.320 回答