Question

导航栏出现问题。图像不能很好地与所有其他元素保持一致，并且我无法在列表元素中添加边距来推动它们。没有图像的jsfiddle很好，并且原始图像本身没有奇怪的边距/尺寸问题。

<body>

<div class="menu">
<ul>
<a href="index.html"><img src = "img/logo.png" id="logo"></a>
<li><a href="#pt1">about</a></li>
<li><a href="#pt2">software</a></li>
<li><a href="#pt3">contact</a></li>
<li><a href="#pt4">login/sign up</a></li>
</ul>
</div>

<div id="pt1">
<img src = "img/cover.png">
</div>

</body>


img{width: 100%;}

.menu{
    position: fixed;
    width: 100%;
    background-color: #454545}

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

li{
    display: inline;
    margin: 0 4%;}

ul{
    float: right;
    width: 100%;}


#logo{
    width: 14%;
    margin: 1% 31% 1% 1%;}

Answer 1

http://jsfiddle.net/kf1x3qut/1/

更新了您的小提琴（我使用了徽标的随机占位符图片），我在vertical-align: middle; ID上添加了#logo以使li标签居中

W3C谈论vertical-aligning元素http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

的内容

Answer 2

我发现您的代码存在一些问题...请在下面查看 -

#logo{
    width: 10%;
    margin: 1% 31% 1% 1%;
}

如果你的div 100%然后10% + 31% (right margin) + other li's width。

实际上可行吗？所以，要小心他们。希望你能解决它。

导航没有排队

2 个答案: