Question

我想创建一个顶部标题，中间有徽标，左侧和右侧有导航选项。

以下是我目前的情况，但不知道如何从那里采取它。我该怎么做才能做到这一点？

<div class="header">
    <div class="nav">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
    <img class="logo_home" src="logo.png" height="100">
            <li>Option 5</li>
            <li>Option 6</li>
            <li>Option 7</li>
            <li>Option 8</li>
        </ul>
    </div>
</div>

CSS：

ul {
list-style:none;
}
li {
display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
top: 0;
left: 0;
position:absolute;
}
 .logo_home {
display:block;
margin-left:auto;
margin-right:auto;
}

Answer 1

这是关于我认为你想要达到的目标的fiddle。更改li inline to float，现在需要根据需要修改ul，因此可以居中。

这是另一个fiddle，我认为这正是你想要实现的目标。您只需要将display:block移到图片上，然后将text-align:center添加到ul。像这样，元素在中心。

所以这是html

<div class="header">
    <div class="nav">
        <ul>
            <li href="#">Option 1</li>
            <li href="#">Option 2</li>
            <li href="#">Option 3</li>
            <li href="#">Option 4</li>
            <li><img class="logo_home" src="logo.png" height="100" /></li>
            <li href="#">Option 5</li>
            <li href="#">Option 6</li>
            <li href="#">Option 7</li>
            <li href="#">Option 8</li>
        </ul>
    </div>
</div>

这是你的css

ul {
list-style:none;
    text-align:center;/* this will center your items*/
}
li {
    margin: 0 5px;
    display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
}
 .logo_home {
margin-left:auto;
margin-right:auto;
/*removed display:block*/
}

Answer 2

我将display: inline从li更改为float: left并将img包裹在li标记中。看起来它正是您所寻找的：FIDDLE

Answer 3

我认为这就是你想要的：

http://jsfiddle.net/VWcVw/

将所有内容设置为display: inline并将图片放入<li>标记。

编辑：这是一个更好的版本，徽标两侧的链接水平堆叠。 http://jsfiddle.net/VWcVw/1/

Answer 4

这是更进一步。我会左右分为两个类，也放置链接。

 .logo_home img{
margin:0 auto;
}
.navleft {
    float: left;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
.navleft li {
    float: left;
    padding: 5px 5px 5px 5px;
}
.navright {
    float: right;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
    .navright li {
    float: left;
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="header">
        <ul>
            <div class="navleft">
            <li><a href="#">Option 1</li>
            <li><a href="#">Option 2</li>
            <li><a href="#">Option 3</li>
            <li><a href="#">Option 4</li>
    </div>      
    <img class="logo_home" src="logo.png" height="100">
    <div class="navright">
            <li><a href="#">Option 5</li>
            <li><a href="#">Option 6</li>
            <li><a href="#">Option 7</li>
            <li><a href="#">Option 8</li>
        </ul>
    </div>
</div>

Answer 5

像这样的东西会这样做 -

.left-li {
    float:left;
}
img {
    float:left;
}
.right-li {
    float:left;
}

这是HTML

<div class="header">
<div class="nav">
    <ul class="left-li">
        <li href="#">Option 1</li>
        <li href="#">Option 2</li>
        <li href="#">Option 3</li>
        <li href="#">Option 4</li>
    </ul>
<img class="logo_home" src="logo.png" height="100">
    <ul class="right-li">
        <li href="#">Option 5</li>
        <li href="#">Option 6</li>
        <li href="#">Option 7</li>
        <li href="#">Option 8</li>
    </ul>
</div>

如何在居中徽标的两侧提供导航选项？

5 个答案: