如何將所有文本保持在同一行？[復制]-有解無憂

這個問題在這里已經有了答案：如何將所有文本保持在同一行？[復制]

        <div class="navbar">
        <label class="logo">appy</label>
        <div class="nav-options">
            <ul class="nav-buttons">
                <li>Home</li>
                <li>About</li>
                <li>Gallery</li>
                <li>Pricing</li>
                <li>Features</li>
                <li>FAQ</li>
                <li>Blog</li>
                <li>Contacts</li>
            </ul>
        </div>
        <a class="sign-up">Sign Up</a>
    </div>

.logo{
font-size: 2.5rem;

}

.navbar{
/* color: white; */
display: flex;
justify-content: space-between;
width: 100%;
padding: 25px 40px;
color: white;
font-family: 'Open Sans', sans-serif;

}

.nav-options{
list-style: none;

}

.nav-options .nav-buttons li{
display: inline-block;
font-size: 1.5rem;
padding: 20px;
font-weight: bold;

}

.nav-options .nav-buttons li:hover{
cursor: pointer;

}

.navbar a{
color: white;
font-size: 1.5rem;

}

.flex-row{
flex-flow: row wrap;

}

uj5u.com熱心網友回復：

由于您使用的是 flexbox，因此您只需添加align-items: center;屬性即可為您處理對齊。

body{
  background-color: lightgrey;
}

.logo{
font-size: 2.5rem;
}

.navbar{
/* color: white; */
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 25px 40px;
color: white;
font-family: 'Open Sans', sans-serif;
}

.nav-options{
list-style: none;
}

.nav-options .nav-buttons li{
display: inline-block;
font-size: 1.5rem;
padding: 20px;
font-weight: bold;

}

.navbar a{
color: white;
font-size: 1.5rem;
}

.flex-row{
flex-flow: row wrap;
}

        <div class="navbar">
          <label class="logo">appy</label>
          <div class="nav-options">
            <ul class="nav-buttons">
              <li>Home</li>
              <li>About</li>
              <li>Gallery</li>
              <li>Pricing</li>
              <li>Features</li>
              <li>FAQ</li>
              <li>Blog</li>
              <li>Contacts</li>
            </ul>
          </div>
          <a class="sign-up">Sign Up</a>
        </div>

uj5u.com熱心網友回復：

嘗試添加align-items: center; 到 css 類 .navbar。

.navbar{
    /* color: white; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 25px 40px;
    color: black;
    font-family: 'Open Sans', sans-serif;
    }

uj5u.com熱心網友回復：

您可以使用

justify-content: center;
align-items: center;

然后您可以為徽標或注冊提供一些邊距或填充。是

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469194.html

標籤：html css 弹性盒

上一篇：子選單的回應式媒體查詢

下一篇：如何將頁面上的影像大小調整為頁面寬度的百分比