时间戳

首页 > 解决方案 > 如何修复我的搜索栏和按钮，同时重新调整我的右侧菜单？

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

问题描述

我正在尝试修复我的导航栏。我试图在我的搜索栏居中添加一个按钮。这只是 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>

我怎样才能解决这个问题？

标签： csshtmlalignmentnavbar

解决方案

您可以使用absolute对齐搜索框的中心。但是menutwo的s太多了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>

推荐阅读