Question

我是HTML / CSS的新手，我在移动标题中图像旁边的导航栏时遇到问题。我一直在尝试使用保证金，浮动等等，但它似乎不起作用。任何人都可以给我一个建议。谢谢:)）

HTML

<div class="container">
    <div class="logo">
        <img src="unilogo.png" width="100">
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Modules</a></li>
            <li><a href="#">Timetable</a></li>
            <li><a href="#">Career Opportnuities</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

CSS

body{
    width: 100%;
    margin: auto;
    padding-top: 9%;
}

.container {
    width: 960px;
    margin: 0 auto;
}

.header{
    background: black;
    width: 100%;
    top: 0;
    position: fixed;
    height: 15%;
    margin-top: 0%
}

.logo{
    float: left;
    margin-left: 0;
    margin-top: 1%
}

.logo img{
    width: 22%;
    height: 1%;
}

a{
    text-decoration: none;
    color: blue;
}

li{
    list-style: none;
    float: left;
    margin-left: 15px;
    padding-top: 0px;
}

.nav{
    float: right;
    clear: right;
    margin-top: 0%;
}

Answer 1

只需将display:inline-block;添加到.logo和.nav

这两个类中

此处示例：http://jsfiddle.net/459qmhrw/

Answer 2

你需要申请一个宽度。你已经漂浮了它们，但如果它们的宽度是100％那么它们就不会并排坐着：

.logo{
    float: left;
    margin-left: 0;
    margin-top: 1%
    max-width: 20%;
}

.nav{
    float: right;
    clear: right;
    margin-top: 0%;
    max-width: 80%;
}

Answer 3

将宽度应用于.nav和.logo类，等于100％。如果他们仍然没有正确对齐，请将宽度调整为95％，然后调整为90％等。

另外，您可能想要使用＆＃34; width =＆＃34; 100＆＃34;＆＃34;属性在HTML中的标记之外。您已经为CSS中的图像指定了一个百分比，这应该是它的位置。

移动标题中图像旁边的导航栏

3 个答案: