[英]How to a align nav items in html/css?
我正在嘗試對齊我的menu-content項，如所附圖像所示。 我能夠對齊nav-menu內容。 但不是insta-logo和hr 。 你能告訴我如何用解釋正確編碼嗎？
body { background-color: black; }.header { margin: 50px 122px 0px 122px; }.logo { color: white; float: left; }.nav-menu { margin: 0px; float: right; }.nav-menu li { padding-left: 82px; display: inline; }.nav-menu a { text-decoration: none; font-family: Roboto; font-size: 18px; color: #808080; }.nav-menu hr { transform: rotate(90deg); border: 0.1px solid #FFFFFF; float: right; }
<,DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="main.css"> <title>Website</title> </head> <body> <div class="header"> <div class="logo"> <h1>Logo</h1> </div> <div class="menu-content"> <div class="nav-menu"> <ul> <li><a title="click to see my work" href="index.html">Work</a></li> <li><a title="about me and contact info" href="about-contact:html">About+Contact</a></li> </ul> <hr style="width;100px."> <!--nav and insta separate line--> <div class="insta-logo"> <img title="My Insta account"src="images/insta-logo-svg.svg" alt="Insta profile link"> </div> </div> </div> </div> <hr> </body> </html>
去掉class="header"元素的左右邊距，或者變小。
將以下 css 屬性添加到 class="header" 的元素中：
display: flex;
justify-content: space-between;
CSS 彈性規則是組織 web 布局的好方法。 在這種情況下，元素將彼此遠離，它們將占據 header 的整個寬度。
請閱讀 CSS 評論進行解釋：
/* CSS Reset for total control over all padding / margins */ * { padding: 0; margin: 0; display: border-box; } body { height: 100vh; background-color: black; font-family: arial; } /* Create navbar container */.navbar { height: 60px; width: 100%; display: flex; /* flex (or Flexbox) divs automatically inner elements into a row */ justify-content: space-around; /* Justify content lets you determine how the inner items behave on an x axis in a Flexbox */ align-items: center; /* Align items lets you determine the alignment of inner elements on a Y axis in a flexbox. In this case, you're centering the items in the middle. */ background-color: black; color: white; border-bottom: 1px solid grey; }.navbar-logo { font-size: 30px; }.navbar-menu { /* Create a container for the navbar-menu items (excludes things you don't want users to click on_. In this case, this should include your links, divider, and logo */ display: flex; align-items: center; }.navbar-menu ul { /* Align items horizontally again for the link list */ display: flex; justify-content: center; list-style: none; }.navbar-menu a { /* Basic link styling */ display: inline-block; margin: 0 10px; text-decoration: none; color: white; transition: all.2s ease; }.navbar-menu a:hover { color: #21abde; } /* Line for the divider */.navbar-menu-divider { height: 60px; background-color: grey; width: .5px; } /* Example block for instagram logo. You'll have to either use the CDN from fontawesome.com or downlaod an image of the logo to have the real one */.ig-logo { display: flex; justify-content: center; align-items: center; padding: 10px; margin: 10px; background-color: grey; cursor: pointer; transition: .2s ease; }.ig-logo:hover { color: white; background: #21abde; }
<body> <nav class="navbar"> <div class="navbar-logo">Logo</div> <div class="navbar-menu"> <ul> <li><a href="">Work</a></li> <li><a href="">About+Contact</a></li> </ul> <div class="navbar-menu-divider"></div> <div class="ig-logo">IG</div> </div> </nav> <body>
歡迎來到社區。
如何在CSS中垂直對齊兩個導航欄項目，然后是圖像，然后又是兩個對齊的導航欄項目？
[英]How do I vertically align two nav bar items, then an image and then again two nav bar items in CSS?
將導航欄中的圖片/ Unicode字符與Flexbox中的文本對齊（html / css）
[英]Align Pictures/Unicode characters in nav with text in Flexbox (html/css)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.