我使用列表设计了导航栏,但无法让列表元素显示在同一行中。我尝试了float
和display: inline-block
,但没有成功。
有人可以帮我垂直对齐此导航栏,以便项目全部内联吗?
html,body,ul,li,p{
margin:0px;
padding:0px;
}
.container{
max-width:100%;
margin:0px auto;
}
.body-container{
max-width:100%;
margin:0px auto;
background-image:url(https://www.dropbox.com/s/fugnr3fgkh5zcoa/main_image.png?dl=0);
}
.nav-container{
width:1250px;
margin:0px auto;
}
#logo {
height: 100px;
vertical-align: middle;
margin-right:250px;
}
.nav-container ul{
list-style-type: none;
}
.nav-container li{
float: left;
color:black;
font-family: 'Gentium Book Basic', serif;
}
.nav-container ul li:not(:first-child):hover {
text-align:center;
}
.nav-container ul li:not(:first-child) {
padding-top:54px;
margin-right:50px;
}
.social-icons{
float:right;
border-style: none;
}
.nav-container p{
clear:both;
font-family: 'Yeseva One', cursive;
text-align:center;
font-size:48px;
color:white;
padding-top:130px;
margin-bottom:30px;
}
.border{
text-align:center;
}
.border img{
width:230px;
height:50px;
margin-bottom:42px;
}
.button-group{
text-align: center;
padding-bottom:142px;
}
.nav-container .button-1 {
margin-left: 30px;
display: inline-block;
padding: 10px 14px;
color: #FFF;
border: 1px solid #FFF;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background-color: rgba(41,44,47);
opacity:0.7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
.nav-container .button-2 {
margin-left: 30px;
display: inline-block;
padding: 10px 14px;
color: #FFF;
border: 1px solid #FFF;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background-color: transparent;
opacity:0.7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="body-container">
<div class="nav-container">
<ul>
<li><a href="#"><img id="logo" src="https://www.dropbox.com/s/erszpjwuvy0kcpi/logo.png?dl=0" alt="Skype Logo" width="158px" height="110px"></a></li>
<li>Home</li>
<li>About</li>
<li>Ingredients</li>
<li>Menu</li>
<li>Revews</li>
<li>Reservations</li>
<li>
<ul>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-youtube"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
</ul>
</li>
</ul>
<p>the right ingredients <br>for the right food</p>
<div class="border"><img src="border-1.png"></div>
<div class="button-group">
<button class="button-1">Book a table</button>
<button class="button-2">See the Menu</button>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
他们不在同一行,因为你添加了:
.nav-container ul li:not(:first-child) {
padding-top: 54px;
margin-right: 50px;
}
由于图标位于其他ul
标记中,因此它会影响此li
中的第二个和第三个ul
,因此存在明显差异。
我认为你应该将图标放在第一个ul中,如下所示:
html,body,ul,li,p{
margin:0px;
padding:0px;
}
.container{
max-width:100%;
margin:0px auto;
}
.body-container{
max-width:100%;
margin:0px auto;
background-image:url(https://www.dropbox.com/s/fugnr3fgkh5zcoa/main_image.png?dl=0);
}
.nav-container{
width:1250px;
margin:0px auto;
}
#logo {
height: 100px;
vertical-align: middle;
margin-right:250px;
}
.nav-container ul{
list-style-type: none;
}
.nav-container li{
float: left;
color:black;
font-family: 'Gentium Book Basic', serif;
}
.nav-container ul li:not(:first-child):hover {
text-align:center;
}
.nav-container ul li:not(:first-child) {
padding-top:54px;
margin-right:50px;
}
.social-icons{
float:right;
border-style: none;
}
.nav-container p{
clear:both;
font-family: 'Yeseva One', cursive;
text-align:center;
font-size:48px;
color:white;
padding-top:130px;
margin-bottom:30px;
}
.border{
text-align:center;
}
.border img{
width:230px;
height:50px;
margin-bottom:42px;
}
.button-group{
text-align: center;
padding-bottom:142px;
}
.nav-container .button-1 {
margin-left: 30px;
display: inline-block;
padding: 10px 14px;
color: #FFF;
border: 1px solid #FFF;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background-color: rgba(41,44,47);
opacity:0.7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
.nav-container .button-2 {
margin-left: 30px;
display: inline-block;
padding: 10px 14px;
color: #FFF;
border: 1px solid #FFF;
text-decoration: none;
font-size: 14px;
line-height: 120%;
background-color: transparent;
opacity:0.7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
transition: background-color 300ms ease;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="body-container">
<div class="nav-container">
<ul>
<li><a href="#"><img id="logo" src="https://www.dropbox.com/s/erszpjwuvy0kcpi/logo.png?dl=0" alt="Skype Logo" width="158px" height="110px"></a></li>
<li>Home</li>
<li>About</li>
<li>Ingredients</li>
<li>Menu</li>
<li>Revews</li>
<li>Reservations</li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-youtube"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
</ul>
<p>the right ingredients <br>for the right food</p>
<div class="border"><img src="border-1.png"></div>
<div class="button-group">
<button class="button-1">Book a table</button>
<button class="button-2">See the Menu</button>
</div>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分:0)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gentium+Book+Basic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="body-container">
<div class="nav-container">
<ul>
<li><a href="#"><img id="logo" src="https://www.dropbox.com/s/erszpjwuvy0kcpi/logo.png?dl=0" alt="Skype Logo" width="158px" height="110px"></a></li>
<li>Home</li>
<li>About</li>
<li>Ingredients</li>
<li>Menu</li>
<li>Revews</li>
<li>Reservations</li>
<li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-youtube"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
</ul>
</li>
<p>the right ingredients <br>for the right food</p>
<div class="border"><img src="border-1.png"></div>
<div class="button-group">
<button class="button-1">Book a table</button>
<button class="button-2">See the Menu</button>
</div>
</div>
</div>
</div>
</body>
</html>
这个可以像你想要的那样工作。你应该在一个标签中而不是在2n1中创建所有内容。