欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

為什么我的文本沒有并排出現(xiàn)在一行中？Html/CSS

CSS
錢浩然2年前8瀏覽0評論

我正面臨一個問題，我正試圖制作一個facebook網(wǎng)站的克隆，我目前正在處理故事/卷軸框，但是我的故事和卷軸文本沒有并排出現(xiàn)在同一行。我希望我的故事和卷軸文本如下圖所示:

https://imgur.com/a/ZitIdcL

但是，即使我使用內(nèi)嵌塊，并將寬度設(shè)置為50%，并將文本左右對齊，最終結(jié)果也是不均勻的，不是我想要的。請幫幫忙

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #f1f2f5;
}

/* this part is for the header */

.header {
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 10px;
  z-index: 1;
  height: 45px;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
}

.leftHeader {
  width: 25%;
  display: flex;
  justify-content: left;
  align-items: left;
  flex-direction: row;
}

.logo {
  height: 50px;
  width: 75px;
}

.searchBar {
  background-color: #eff2f5;
  position: relative;
  padding: 15px;
  border-radius: 40px;
  display: flex;
  gap: 20px;
  margin-left: -10px;
  height: 10px;
}

.searchBtn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.searchLogo {
  height: 30px;
  width: 50px;
}

.inputText {
  background-color: #eff2f5;
  outline: none;
  border: 0;
  width: 175px;
  height: 15px;
}

.centerHeader {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.centerHeader i {
  font-size: 25px;
}

.rightHeader {
  width: 25%;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-direction: row;
  gap: 20px;
}

.rightHeader i {
  font-size: 25px;
}

.profilePic img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* This part is for the main */

.mainBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50%;
  margin: 50px auto 0;
}

.stories_Reels_Box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-top: 30px;
  margin-bottom: 20px;
}

.upper_Box {
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  border-bottom: 2px solid black;
}

.stories {
  width: 50%;
  text-align: right;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.reels {
  width: 50%;
  text-align: left;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.whats_On_Your_Mind {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.post_One {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.people_You_May_Know {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/a35cda4da8.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="header">
      <div class="leftHeader">
        <img class="logo" src="images/Facebook-logo.png" />
        <div class="searchBar">
          <img class="searchBtn" src="images/search-icon.webp" />
          <input type="text" class="inputText" placeholder="Search Facebook" />
        </div>
      </div>

      <div class="centerHeader">
        <div class="home">
          <i class="fa-solid fa-house" style="color: #000000"></i>
        </div>
        <div class="watch">
          <i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
        </div>
        <div class="marketplace">
          <i class="fa-solid fa-shop" style="color: #000000"></i>
        </div>
        <div class="group">
          <i class="fa-solid fa-user-group" style="color: #000000"></i>
        </div>
      </div>
      <div class="rightHeader">
        <div class="menu">
          <i class="fa-solid fa-bars" style="color: #000000"></i>
        </div>

        <div class="message">
          <i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
        </div>

        <div class="notification">
          <i class="fa-solid fa-bell" style="color: #000000"></i>
        </div>

        <div class="profilePic">
          <img
            src="/images/ProgrammingIllustration.png"
            alt="profile_picture"
          />
        </div>
      </div>
    </div>

    <div class="mainBar">
      <div class="stories_Reels_Box">
        <div class="upper_Box">
          <div class="stories">Stories</div>
          <div class="reels">Reels</div>
        </div>
      </div>

      <div class="whats_On_Your_Mind"></div>
      <div class="post_One"></div>
      <div class="people_You_May_Know"></div>
    </div>

    <div class="leftSidebar"></div>

    <div class="rightBar"></div>
  </body>
</html>

Flex布局僅適用于flex容器的直接子容器。所以你需要設(shè)置。upper_Box to display: flex使這些框并排放置。但是同樣值得一問的是你是否需要。upper_Box div在所有。看起來你可以把它拿掉。

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #f1f2f5;
}

/* this part is for the header */

.header {
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 10px;
  z-index: 1;
  height: 45px;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
}

.leftHeader {
  width: 25%;
  display: flex;
  justify-content: left;
  align-items: left;
  flex-direction: row;
}

.logo {
  height: 50px;
  width: 75px;
}

.searchBar {
  background-color: #eff2f5;
  position: relative;
  padding: 15px;
  border-radius: 40px;
  display: flex;
  gap: 20px;
  margin-left: -10px;
  height: 10px;
}

.searchBtn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.searchLogo {
  height: 30px;
  width: 50px;
}

.inputText {
  background-color: #eff2f5;
  outline: none;
  border: 0;
  width: 175px;
  height: 15px;
}

.centerHeader {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.centerHeader i {
  font-size: 25px;
}

.rightHeader {
  width: 25%;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-direction: row;
  gap: 20px;
}

.rightHeader i {
  font-size: 25px;
}

.profilePic img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* This part is for the main */

.mainBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50%;
  margin: 50px auto 0;
}

.stories_Reels_Box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-top: 30px;
  margin-bottom: 20px;
}

.upper_Box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  border-bottom: 2px solid black;
}

.stories {
  width: 50%;
  text-align: right;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.reels {
  width: 50%;
  text-align: left;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.whats_On_Your_Mind {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.post_One {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.people_You_May_Know {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/a35cda4da8.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="header">
      <div class="leftHeader">
        <img class="logo" src="images/Facebook-logo.png" />
        <div class="searchBar">
          <img class="searchBtn" src="images/search-icon.webp" />
          <input type="text" class="inputText" placeholder="Search Facebook" />
        </div>
      </div>

      <div class="centerHeader">
        <div class="home">
          <i class="fa-solid fa-house" style="color: #000000"></i>
        </div>
        <div class="watch">
          <i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
        </div>
        <div class="marketplace">
          <i class="fa-solid fa-shop" style="color: #000000"></i>
        </div>
        <div class="group">
          <i class="fa-solid fa-user-group" style="color: #000000"></i>
        </div>
      </div>
      <div class="rightHeader">
        <div class="menu">
          <i class="fa-solid fa-bars" style="color: #000000"></i>
        </div>

        <div class="message">
          <i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
        </div>

        <div class="notification">
          <i class="fa-solid fa-bell" style="color: #000000"></i>
        </div>

        <div class="profilePic">
          <img
            src="/images/ProgrammingIllustration.png"
            alt="profile_picture"
          />
        </div>
      </div>
    </div>

    <div class="mainBar">
      <div class="stories_Reels_Box">
        <div class="upper_Box">
          <div class="stories">Stories</div>
          <div class="reels">Reels</div>
        </div>
      </div>

      <div class="whats_On_Your_Mind"></div>
      <div class="post_One"></div>
      <div class="people_You_May_Know"></div>
    </div>

    <div class="leftSidebar"></div>

    <div class="rightBar"></div>
  </body>
</html>

只需使用flexbox:

https://developer . Mozilla . org/en-US/docs/Web/CSS/CSS _ Flexible _ Box _ Layout/Basic _ Concepts _ of _ Flexbox

/** just for demo */
.box-container {
  margin: 50px;
  width: 300px;
  background-color: gray;
}

.title {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
}

.title .tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

<div class="box-container">
  <!-- here -->
  <div class="title">
    <div class="tab" style="background-color: red">
      Stories
    </div>
    <div class="tab" style="background-color: green">
      Reels
    </div>
  </div>
  <!-- end here -->
  <div class="rest-of-the-content">
    Text
  </div>
</div>