Question

所以我在html和css中建立了一个网站。我已经创建了一个带有链接的导航栏，但是当我缩小时，链接会相互之间而不是内联。如果有人可以给我一些指示，那就太棒了。感谢

<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">SHOPS</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">ABOUT US</a></li>
</ul>
</div>
<div class="main">

</div>
</div>
</body>
</html>

     body {
    padding: 0;
    margin: 0;
    background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}

.logo {
    margin-bottom: 10px;
    margin: auto;
    width: 524px;
}

.wrap {
    width: 960px;
    margin: auto;
}

.nav {
    height: 37px;
    background-color: rgba(26,26,26,0.8);
    border: 1px solid black;
    margin-bottom: 10px;

}

ul {
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 38px;
}

ul li {
    display: inline;
    color: #828282;
    padding: 2px 40px;
    background: #595959;
    border:1px solid #828282;
    margin: 0 10px;
}

ul li a {
    text-decoration: none;
    color: white;
    font-family: arial;
}

ul li a:hover {

}

.main {
    min-height: 300px;
    height: auto;
    background-color: rgba(26,26,26,0.8);
    border: 1px solid black;
}

Answer 1

＆＃34;链接在彼此之下，而不是内联＆＃34;

要解决此问题，您需要将float: left;属性添加到您的li中，如下所示：

ul li {
    display: inline-block;
    float: left;
    color: #828282;
    padding: 2px 40px;
    background: #595959;
    border:1px solid #828282;
    margin: 0 10px;
}

缩小时导航链接堆栈

1 个答案: