如何修复搜索栏和按钮，同时又重新调整右侧菜单？

时间：2019-04-01 03:18:54

标签： css html5 alignment navbar

我正在尝试修复导航栏。我尝试在添加一个按钮的同时使搜索栏居中。这只是针对html和CSS的实践，但我不知道为什么我的搜索按钮这么小，以及为什么我的右菜单现在与<hr>对齐。它应该是一个简单的youtube副本.... 

  
    *{
	margin: 0;
	padding: 0;
     }
    body{
	font-family: Arial;
    }
    ul{
	text-decoration: none;
    }
    .menuOne {
	float: left;
	word-spacing: 12px;
    margin-top: 10px; 
    margin-right:30px;
    margin-left: 10px;
    }
    .menuTwo {
	float: right;
	word-spacing: 12px;
  	margin-top: 10px; 
  	margin-right:30px;
    }
    li{
	display: inline;	
    }
    .topNav .searchContainer{
	text-align: center;
    }
    .topNav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: 1px solid gray;
    }
    .topNav .searchContainer button {
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: 1px solid gray;
    cursor: pointer;
    }

    hr.style-one {
    border: 0;
    height: 0px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
    }
    <!DOCTYPE html>
    <html>
    <head>
	<title>Youtube</title>
	<link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
	<!--This is the nav bar for youtube-->
	<nav class="topNav">
		<ul class="menuOne">
			<li>Menu</li>
			<li>YouTube</li>
		</ul>
		<div class="searchContainer">
		<input type="text" placeholder="Search...">
		<button type="submit" class="searchButton"></button>
		</div>
		<ul class="menuTwo">
			<li>Upload</li>
			<li>YouTubeApps</li>
			<li>Messages</li>
			<li>Notifications</li>
			<li>Profile</li>
		</ul>
	</nav>
	<br>
	<!--this is to seperate the nav from the containers bellow-->
	<hr>
	<!--Container for the video-->
	<div class="videoContainer">
		
	</div>
	<!--Container for the description of the video, to go below 
    video-->
	<div class="videoDescription">
		
	</div>
	<!--Side container for recommended videos-->
	<div class="sideBar">
		
	</div>
    </body>
    </html>

我该如何解决？

2 个答案:

答案 0 :(得分：1)

您可以使用absolute对齐搜索框的中心。但是menutwo的li太多，所以我使用了不重叠的较小字体。

*{
margin: 0;
padding: 0;
 }
body{
font-family: Arial;
}
ul{
text-decoration: none;
}
.menuOne {
float:left;
word-spacing: 12px;
margin-top: 10px; 
margin-right:30px;
margin-left: 10px;
}

.menuTwo {
float:right;
word-spacing: 12px;
margin-top: 10px; 
margin-right:30px;
font-size:11px;
}
li{
display: inline;    
}

.topNav {overflow:hidden;position:relative;height:50px}

.topNav .searchContainer{
position:absolute;
width:240px;
top:8px;
left:50%;
margin-left:-100px;
text-align: center;
}
.topNav input[type=text] {
float:left;
width:138px;
padding: 6px 0;
font-size: 17px;
border: 1px solid gray;
}
.topNav .searchContainer button {
width:98px;
padding: 6px 0;
background: #ddd;
font-size: 17px;
border: 1px solid gray;
cursor: pointer;
}

hr.style-one {
border: 0;
height: 0px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
<div style="min-width:1000px;margin:0 auto">
<nav class="topNav">
    <ul class="menuOne">
        <li>Menu</li>
        <li>YouTube</li>
    </ul>
    <div class="searchContainer">
      <input type="text" placeholder="Search...">
      <button type="submit" class="searchButton">Search</button>
    </div>
    <ul class="menuTwo">
        <li>Upload</li>
        <li>YouTubeApps</li>
        <li>Messages</li>
        <li>Notifications</li>
        <li>Profile</li>
    </ul>
</nav>
<br>
<!--this is to seperate the nav from the containers bellow-->
<hr>
<!--Container for the video-->
<div class="videoContainer">

</div>
<!--Container for the description of the video, to go below 
video-->
<div class="videoDescription">

</div>
<!--Side container for recommended videos-->
<div class="sideBar">

</div>
</div>

答案 1 :(得分：0)

我建议您研究flexbox，因为它将最终帮助您解决使网站具有响应能力的问题。 Here is another guide as well

我所做的是将topNav更改为display: flex;，并为其设置了背景色。然后有一个div，在标题.header-content中包含所有内容。设置为整个topNav宽度的80％，只是为了使所有内容居中。它还具有justify content: space-between，它将在您所有元素之间放置空格。

不知道为什么您的按钮如此之小，以至于对我来说效果很好。 （您需要整页查看以下代码段，以查看整个右侧菜单）。

.topNav {
    display: flex;
    width: 100%;
    padding: 10px 0;
    justify-content: center;
    background-color: #D03237;
    margin-bottom: 20px;
    height: 50px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    width: 80%;
    padding: 0 20px;
}

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: Arial;
}

ul{
    text-decoration: none;
}

.menuOne {
    float:left;
    word-spacing: 12px;
    margin-top: 10px; 
    margin-right:30px;
    margin-left: 10px;
}

.menuTwo {
    float:right;
    word-spacing: 12px;
    margin-top: 10px; 
    margin-right:30px;
    font-size:11px;
}
li{
    display: inline;    
}

.topNav .searchContainer{
    position:absolute;
    width:240px;
    top:8px;
    left:50%;
    margin-left:-100px;
    text-align: center;
}
.topNav input[type=text] {
    float:left;
    width:138px;
    padding: 6px 0;
    font-size: 17px;
    border: 1px solid gray;
}
.topNav .searchContainer button {
    width:98px;
    padding: 6px 0;
    background: #ddd;
    font-size: 17px;
    border: 1px solid gray;
    cursor: pointer;
}

hr.style-one {
    border: 0;
    height: 0px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
<!DOCTYPE html>
<html>
<head>
    <title>Youtube</title>
    <link rel="stylesheet" type="text/css" href="site.css">
    
</head>
<body>
    <!--This is the nav bar for youtube-->
    <nav class="topNav">
        <div class="header-content">
            <ul class="menuOne">
                <li>Menu</li>
                <li>YouTube</li>
            </ul>
            <div class="searchContainer">
            <input type="text" placeholder="Search...">
            <button type="submit" class="searchButton">Search</button>
            </div>
            <ul class="menuTwo">
                <li>Upload</li>
                <li>YouTubeApps</li>
                <li>Messages</li>
                <li>Notifications</li>
                <li>Profile</li>
            </ul>
        </div>
    </nav>
    <!--Container for the video-->
    <div class="videoContainer">

    </div>
    <!--Container for the description of the video, to go below 
    video-->
    <div class="videoDescription">

    </div>
    <!--Side container for recommended videos-->
    <div class="sideBar">

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

相关问题
最新问题