Как выровнять элемент div по правому краю
Я пытаюсь разместить гамбургер-меню справа от моей страницы.
Мне просто удалось разместить его на одной строке с заголовком, но между элементами нет желаемого разрыва.
Что я сделал:
margin-left:auto;
margin-right:0px;
ничего не делает. Если я перемещаю элемент вправо, он переходит на следующую строку, тогда как я хочу, чтобы два элемента находились в одной строке.
#drop_menu{
display:inline-block;
float: right;
}
Вот полный код:
Я также попробовал:
#title_and_menu{
position:relative;
}
#drop_menu{
display:inline-block;
right: 200px;
/*float: right;*/
}
#drop_menu {
display: inline-block;
/*float: right;*/
}
#hamburger_menu {
width: 35px;
height: 1px;
background-color: black;
margin: 6px 0;
}
img {
width: 100%;
height: auto;
max-width: 100%;
display: inline-block;
}
#myHeader {
display: inline-block;
background-color: white;
color: black;
text-align: left;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
#myHeader:hover {
background-color: black;
color: white;
}
body {
padding-top: 25px;
padding-botttom: 25px;
padding-left: 25px;
padding-right: 25px;
}<div id = "title_and_menu">
<div id = "myHeader">
<h1>9.</h1>
</div>
<div id = "drop_menu">
<div id = "hamburger_menu"></div>
<div id = "hamburger_menu"></div>
<div id = "hamburger_menu"></div>
</div>
</div>
<img src = "home_image.jpg" alt = "home image">Добавляем следующий код:
#title_and_menu {
display: flex;
justify-content: space-between;
align-items: center;
}
Делает верхнюю панель гамбургер-меню вдвое толще двух нижних: временное решение
Этот вопрос похож на: Управление количеством места в justify-content: space-between. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.
Что вы имеете в виду под словами «не допускается наличие нескольких одинаковых атрибутов идентификатора», а также какие из них не разрешены? Если бы вы могли назвать имена идентификаторов, было бы здорово
Это означает, что ваша опубликованная разметка недействительна, поскольку идентификатор ДОЛЖЕН быть уникальным для всего документа, ссылка: Developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
Ответы 3
Вы можете использовать flexbox для #title_and_menu, с justify-content: space-between; для распределения влево/вправо и align-items: center; для вертикального центрирования обоих:
#drop_menu {
display: inline-block;
/*float: right;*/
}
.hamburger_menu {
width: 35px;
height: 1px;
background-color: black;
margin: 6px 0;
}
img {
width: 100%;
height: auto;
max-width: 100%;
display: inline-block;
}
#myHeader {
display: inline-block;
background-color: white;
color: black;
text-align: left;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
#myHeader:hover {
background-color: black;
color: white;
}
body {
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
#title_and_menu {
display: flex;
justify-content: space-between;
align-items: center;
}<div id = "title_and_menu">
<div id = "myHeader">
<h1>9.</h1>
</div>
<div id = "drop_menu">
<div class = "hamburger_menu"></div>
<div class = "hamburger_menu"></div>
<div class = "hamburger_menu"></div>
</div>
</div>
<img src = "home_image.jpg" alt = "home image">Я попробовал ваше решение, но при этом гамбургер-меню испортилось. Так как верхний стержень толще, чем 2 нижних стержня. Я опубликую картинку в вопросе.
Как видите, это работает в моем фрагменте, который содержит весь предоставленный вами код. Поэтому должен быть какой-то дополнительный код, который вызывает это и который вы не опубликовали.
Рассмотрите возможность исправления повторяющихся идентификаторов здесь.
@MarkSchultheiss Готово — я не хотел менять какой-либо исходный код (просто добавьте это одно правило CSS), но, конечно, повторяющиеся идентификаторы («#hamburger_menu») являются недействительным HTML, поэтому я заменил их на класс с тем же именем.
Приведенное выше решение может фактически решить проблему, но если вы хотите попробовать позиционирование, вы можете использовать position: absolute; для перехода в гамбургер-меню. Вы можете разместить его в правой части страницы, сохраняя при этом заголовок выровненным по левому краю.
#title_and_menu {
position: relative;
}
#myHeader {
display: inline-block;
background-color: white;
color: black;
text-align: left;
padding: 25px;
}
#drop_menu {
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%);
cursor: pointer;
}
.hamburger_menu {
width: 35px;
height: 3px;
background-color: black;
margin: 6px 0;
}
img {
width: 100%;
height: auto;
max-width: 100%;
display: inline-block;
}
#myHeader:hover {
background-color: black;
color: white;
}
body {
padding: 25px;
}<div id = "title_and_menu">
<div id = "myHeader">
<h1>9.</h1>
</div>
<div id = "drop_menu">
<div class = "hamburger_menu"></div>
<div class = "hamburger_menu"></div>
<div class = "hamburger_menu"></div>
</div>
</div>
<img src = "home_image.jpg" alt = "home image">Для получения дополнительной информации вы можете использовать документацию position , чтобы понять, как работает позиционирование.
Рассмотрите возможность исправления повторяющихся идентификаторов здесь.
@MarkSchultheiss правильно, совсем забыл об этом. Исправлен код. Спасибо, что заметили.
Вы видите то, что обычно называют «стопкой блинов» с заголовком/телом/нижним колонтитулом - или, может быть, без нижнего колонтитула, но я включил один для иллюстрации.
Много уродливого лишнего CSS, чтобы сделать визуальный эффект более заметным.
Исправлена проблема с дублирующимся идентификатором, сделав все классы и использовав их в CSS.
padding-botttom: 25px; было написано с ошибкой, но использовался более современный em подход, при котором я делаю размер шрифта 16 пикселей, который в любом случае является значением по умолчанию для большинства браузеров.
body,
* {
font-size: 16px;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: grid;
place-items: center;
padding: 1.5m;
}
.page-container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
border: 1px #00ff0044 solid;
}
.header-container {
display: grid;
grid-template-columns: auto 2em;
background-color: #00bedf44;
margin: 0.5em;
border: solid 1px #0000ff;
align-items: center;
padding-right: 1em;
}
.content-container {
display: grid;
place-items: center;
border: solid 1px #ffdd00;
background-color: #ffdd0011;
}
.footer-container {
display: grid;
place-items: center;
margin-top: 0.5em;
border: solid 1px #ffdd00;
background-color: #ff000033;
width: 100vw;
}
.my-header>* {
font-size: 2em;
}
.my-header {
display: grid;
align-items: center;
margin-left: 1em;
height: 2.5em;
background-color: white;
color: black;
}
.my-header:hover {
background-color: black;
color: white;
}
.drop-menu {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 3em;
align-items: center;
background-color: #ff00df44;
border: dashed 1px #ff0000;
text-align: center;
height: 2em;
}
.hamburger-menu {
width: 1em;
background-color: black;
height: 0.15em;
margin-top: 0.25em;
margin-bottom: 0.25em;
}
.home-logo {
width: 100%;
max-width: 100%;
border: solid red 1px;
}<div class = "page-container">
<div class = "header-container title-and-menu">
<div class = "my-header">
<h1>9.</h1>
</div>
<div class = "drop-menu">
<div class = "hamburger-menu"></div>
<div class = "hamburger-menu"></div>
<div class = "hamburger-menu"></div>
</div>
</div>
<div class = "content-container">
<h2>Introduction to introductions</h2>
<img class = "home-logo" src = "home_image.jpg" alt = "home image">
<div>I have some cool content we all agreee!</div>
</div>
<div class = "footer-container">
<div>footer I am</div>
<img class = "home-logo" src = "home_image.jpg" alt = "home image">
</div>
</div>
Обратите внимание, что наличие нескольких одинаковых атрибутов
idне допускается.