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

ProgramBox

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

Post author:admin
Запись опубликована:3 мая, 2023
Post category:Вопросы по программированию

#css #html #alignment #navbar

#css #HTML #выравнивание #панель навигации

Вопрос:

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

Как я могу это исправить?

Ответ №1:

Вы можете использовать absolute для выравнивания по центру окна поиска. Но в двух меню слишком много li символов, поэтому я использовал шрифты smallr, которые не перекрывались.

 *{
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. Спасибо, это сработало! всего пара вопросов. 1. Я попытался расширить searchcontainer, но ширина не увеличивается

2. @ChrisA Не могли бы вы показать мне свой код? (jsfiddle, codepen и т.д.)

Ответ №2:

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

Что я сделал, так это изменил topNav на display: flex; и просто придал ему цвет фона. Затем появляется div, который содержит все ваше содержимое в вашем заголовке, .header-content . Это значение равно 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>