html - 令人困惑的 CSS 定位

Question

我目前正在基于 off-white 网站 ( https://www.off---white.com/en/US ) 开发一个练习网站。我面临的一个问题是，当尝试定位商店、更多、关于和联系的顶部选项卡时，它会移动我旁边的 off-black™ 文本。无论如何我可以将其他人移动到屏幕右侧并将off-black™留在左侧吗？

我尝试了多种方法，从我自己的实验到到达谷歌的第 4 页。

我的 HTML

<div class="web-top">
  <div id="web-top-title">
    <p class="web-top-title-text">Off-Black™&lt;/p>
  </div>
  <div id="web-top-shop">
    <p class="web-top-shop-text">Shop</p>
  </div>
  <div id="web-top-more">
    <p class="web-top-more-text">More</p>
  </div>
  <div id="web-top-about">
    <p class="web-top-about-text">About</p>
  </div>
  <div id="web-top-contact">
    <p class="web-top-contact-text">Contact</p>
  </div>
</div>

我的 CSS

/* Full Page Styling */
body {
    padding:0px;
    margin:0px;
}

/* Top Header Styling */
.web-top {
    color:white;
    background-color:blue;
    width:100%;
    height:22px;
    display:block;
    margin-top:0px;
}

#web-top-title, #web-top-shop, #web-top-more, #web-top-about, #web-top-contact {
    margin-top:-14px;
    float:left;
}

.web-top-title-text {
    margin-left:10px;
}

标签： htmlcss

Answer 1

你可以使用display: flex;和应用flex-grow来获取这个 UI。

/* Full Page Styling */

body {
  padding: 0px;
  margin: 0px;
}


/* Top Header Styling */

.web-top {
  color: white;
  background-color: blue;
  width: 100%;
  display: flex;
  align-items: center;
}

#web-top-title {
  flex-grow: 1;
  margin-left: 10px;
}

#web-top-shop,
#web-top-more,
#web-top-about,
#web-top-contact {
  margin-right: 10px;
}

<div class="web-top">
  <div id="web-top-title">
    <p class="web-top-title-text">Off-Black™&lt;/p>
  </div>
  <div id="web-top-shop">
    <p class="web-top-shop-text">Shop</p>
  </div>
  <div id="web-top-more">
    <p class="web-top-more-text">More</p>
  </div>
  <div id="web-top-about">
    <p class="web-top-about-text">About</p>
  </div>
  <div id="web-top-contact">
    <p class="web-top-contact-text">Contact</p>
  </div>
</div>