导航项目不在同一行

时间:2018-04-29 18:59:04

标签: html css

我使用列表设计了导航栏,但无法让列表元素显示在同一行中。我尝试了floatdisplay: 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;
&#13;
&#13;

2 个答案:

答案 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中创建所有内容。