Question

我的标记看起来像这样：

<div class="header-section">
    <a href="#" class="logo"><img src="logo.png" /></a>
    <div class="navigation">
        <ul>
            <li><a href=# class="active">Home</a></li>
            <li><a href=#>Bakery</a></li>
            <li><a href=#>Fishery</a></li>
            <li><a href=#>Casino</a></li>
            <li><a href=#>Disney Land</a></li>
        </ul>
    </div>
    <div style="clear:both" />
</div>

和重要的CSS是：

.header-section {
    margin: 30px 0;
}

.header-section .logo {
    float: left;
}
.header-section .logo img{
    border: 0;
}
.header-section .navigation {
    float: right;
    margin-top: 23px;
}
.header-section .navigation ul {
    list-style: none;
}
.header-section .navigation ul li{
    font-size: 18px;
    font-family: Tahoma, Arial, Verdana;
    float: left;
    margin: 0 20px;
}

因此链接的格式为徽标右侧的水平线。最初我有想法让它们只是在屏幕不动产不允许它们在一行时换行但实际发生的事情是在包装之前，它们落在徽标之下。我很满意，直到我看到它 - 具有讽刺意味的是 - IE以我的想法呈现它。

所以我的问题是 - 如何在贴在徽标图像下面之前获取包装链接？

Answer 1

将标记作为块元素：

并添加宽度＆amp;高度..

.header-section a {
display:block;
width:100px;
height:100px;
}

Answer 2

尝试在<a href="#" class="logo"><img src="logo.png" /></a>之后添加navigation div end并修复两个部分的宽度......它应该可以正常工作

如何在CSS中执行此操作

2 个答案: