Как я могу исправить панель поиска и кнопку, а также изменить свое меню? - PullRequest
Новая
       28

Как я могу исправить панель поиска и кнопку, а также изменить свое меню?

1 голос
/ 01 апреля 2019

Я пытаюсь исправить мою навигационную панель.Я пытался центрировать мою панель поиска, добавляя к ней кнопку.Это просто практика для 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 ]

1 голос
/ 01 апреля 2019

Вы можете использовать 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>
0 голосов
/ 01 апреля 2019

Я бы порекомендовал посмотреть flexbox , так как это поможет вам в конечном итоге решить проблему с адаптацией вашего сайта. Вот еще один гид

Я изменил topNav на display: flex; и просто присвоил ему цвет фона. Тогда есть div, который содержит весь ваш контент в вашем заголовке, .header-content. Это установлено, чтобы быть 80% ширины всего topNav, просто чтобы центрировать весь ваш контент больше. Он также имеет 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>
...