Question

所以我希望徽标位于中间，2个链接指向左侧，2个链接指向右侧。我一直在尝试很多不同的东西，但我不能让所有4个链接坐在同一高度，同时在中心也有徽标..

这是我得到的

HTML：

<header>
   <nav>
     <ul>
        <li><a href="smartphones.php">Smartphones</a></li>
        <li><a href="tablets.php">Tablets</a></li>
     </ul>
     <ul>
        <li><img src="logo.png" alt="Logo" height="80" width="80" /></li>
     </ul>       
     <ul>   
        <li><a href="laptops.php">Laptops</a></li>
        <li><a href="desktops.php">Desktops</a></li>    
     </ul>
  </nav>    
</header>

的CSS：

header {
    width: 100%;
    height: 80px;
    background-color: #FFF;
}

nav {
    height:80px;
    width:1000px;
    margin: 0 auto;
}

nav ul {
    width: 33.33%;
    margin:0 auto;
    float: left;
}

nav ul  li{
    display:inline;
}

这里给出了什么 http://e2-repair.be/

编辑：请注意我已经尝试了很多东西，所以我现在得到的东西可能看起来很笨或者其他什么，但它是我到目前为止最接近的

Answer 1

试试这个：

nav {
    text-align: center;
}
nav > ul {
    display: inline-block;
}
nav > ul:first-child {
    float: left;
}
nav > ul:last-child {
    float: right;
}

Answer 2

试试这个：

nav:after {
    content: "";
    display: inline-block;
    width: 100%;
}
nav {
    text-align: justify;
}
nav ul {
    display: inline-block;
    vertical-align: middle; /* Or whatever you like: top, bottom, baseline, ... */
}

这是justify the last line of an element的伎俩（在这种情况下，唯一的一行）。

Answer 3

尝试这有助于你

nav {
    text-align:center;
}
nav ul {
    width: 33.33%; //remove this line
    margin: 0; //change margin to 0
    float: left; //remove this line
    display: inline-block;
    vertical-align: middle; // to vertically align in center
}

nav ul  li{
    display:inline-block; // change inline to inline-block
}

Answer 4

检查此问题http://jsfiddle.net/luckmattos/327BL/

我删除了一对<ul>，只使用了一个。
在<li class="logo">。
css的微小变化，检查小提琴。
请务必根据您的内容调整<ul>的宽度。

希望它有所帮助。

Answer 5

我知道我的问题在哪里。也许会尝试消除底部滚动条，因为您的图像太大，因此您的坐标会受到影响。

无法正确定位导航栏

5 个答案:

检查此问题http://jsfiddle.net/luckmattos/327BL/