右对齐 Div CSS

Question

我正在尝试在我的网站的导航栏上右对齐一个 div。 目标是对齐 div，以便它始终在网页右侧的同一位置对齐。 我试过边距，CSS定位，改变div display: inline-block;

 body { overflow-x: hidden; font-size: large; margin: 0; } h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }.nav-bar { z-index: 98; background-color: rgba(204, 204, 204, 0.8); padding: 15px; }.nav-img { height: 100px; }.nav-options { text-align: right; }.nav-option { border: none; background-color: rgba(204, 204, 204, 0.1); height: 100px; width: 150px; font-size: large; cursor: pointer; transition: all 0.5s ease-out; position: relative; bottom: 15px; }.nav-option:hover { background-color: rgba(204, 204, 204, 0.1); color: white; } p, ul, ol, li, select { font-family: 'Poppins', sans-serif; }.line { width: 50px; background-color: white; z-index: 99; height: 0.5px; }.hamburger-menu { background-color: transparent; border: none; display: inline-block; }.mobile-nav { display: none; }.mobile-menu { margin: 50px; padding: 0; z-index: 98; position: fixed; right: 0%; bottom: -6%; background-color: rgba(204, 204, 204, 0.8); width: 100%; height: 110%; margin-left: auto; margin-right: auto; padding: 50px; }.mobile-options { position: absolute; list-style: none; top: 0; width: 100%; display: flex; justify-content: center; flex-direction: column; height: 110%; }.mobile-option { width: 100%; height: 50px; font-size: large; letter-spacing: 2px; line-height: 100%; text-align: center; background-color: rgba(204, 204, 204, 0.8); border: none; padding-right: 60px; }.exit-btn { width: 50px; background-color: transparent; border: none; font-size: 4rem; color: white; font-family: 'Montserrat', sans-serif; font-weight: lighter; float: right; position: absolute; bottom: 75%; left: 75%; } @media screen and (max-width: 830px) {.desktop-nav { display: none; }.mobile-nav { display: inline-block; } }

 <div class="nav-bar"> <nav class="desktop-nav"> <a href="index.html"><img src="https://picsum.photos/100" class="nav-img"></a> <div class="nav-options"> <button class="nav-option">About Us</button> <button class="nav-option">Classes</button> <button class="nav-option">Contact Us</button> </div> </nav> <nav class="mobile-nav"> <a href="index.html"><img src="https://picsum.photos/100" class="nav-img"></a> <div class="nav-options"> <button class="hamburger-menu" id="mobile-menu-enter"> <div class="line"></div><br> <div class="line"></div><br> <div class="line"></div> </button> </div> </nav> </div>

Answer 1

您可以使用float: right; .

您还可以在此处找到其他解决方案如何正确对齐 div 元素？

Answer 2

您可以使用position absolute从 DOM 中删除元素，并将元素相对于第一个包含父元素的任何位置移动到具有 position 集的 DOM 树上。 然后使用top 、 right 、 bottom和/或left等定位道具在页面上移动元素。

有关更多信息，请参阅position上的 MDN

 :root { --padding: .5em; } /* This is the parent element, set its position to relative so the right-div will be positioneed relative to it */ #parent { background: red; padding: .5em; position: relative; } #first-div { background: yellow; padding: var(--padding); } p { padding: var(--padding); background: white; } /* set this divs position to absolute so its top, left, bottom, right positioning props will be relative to its closest parent set to relative */ #right-div { position: absolute; right: calc(var(--padding) + 0px); top: calc(var(--padding) + 0px); background: green; color: white; padding: var(--padding);

 <div id="parent"> <div id="first-div">This is the first div</div> <p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p> <div id="right-div">This is the right div</div> </div>

Answer 3

我最终将position设置为absolute并使用vw作为left属性的属性。

.hamburger-menu {
    background-color: transparent;
    border: none;
    position: absolute;
    left: 80vw;
    margin-right: 5vw;
}