0

我想创建一个顶部标题，其中徽标位于中心，导航选项位于左侧和右侧。

以下是我到目前为止所拥有的，但不知道如何在那里形成。我该怎么做才能做到这一点？ 

<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;
}
4

5 回答 5

1

这是关于我认为您正在努力实现的目标的小提琴。更改li inline to float, 现在 ul 需要根据您的需要进行修改，因此可以居中。

这是另一个小提琴，我认为这正是您想要实现的。您只需要删除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*/
}
于 2013-04-06T19:38:18.587 回答
1

我display: inline从lito更改为float: left并将其包装img在li标签中。看起来这就是你要找的东西：FIDDLE

于 2013-04-06T19:41:01.797 回答
1

我认为这就是你想要的：

http://jsfiddle.net/VWcVw/

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

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

于 2013-04-06T19:41:42.683 回答
1

那就是走得更远。我会将左右分为两个类，也放置链接。

 .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>
于 2013-04-06T19:41:52.110 回答
1

像这样的东西会做到这一点-

.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>

于 2013-04-06T19:42:08.067 回答