我需要將名稱等顯示在一行中。我嘗試了display: inline;“標題”，但沒有用。（我是新手）
body {
background-color: snow;
box-sizing: border-box;
}
header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.611rem;
}
header .circle {
display: inline-block;
height: 1.79rem;
width: 1.79rem;
border-radius: 50%;
}
header .circle__red {
background: #ff605C;
}
header .circle__yellow {
background: #FFBD44;
}
header .circle__green {
background: #00CA4E;
}<body>
<header>
<div class="circle circle__red"></div>
<div class="circle circle__yellow"></div>
<div class="circle circle__green"></div>
<div class="name">
<h3 class="name-alt">Muhammed Ali Yuruk</h3>
</div>
</header>
</body>代碼： https ://codepen.io/saruhankaya_/pen/rNpGMxK
uj5u.com熱心網友回復：
您想要display: inline;或display: inline-block;在標題的孩子而不是標題上。選擇器header>*or.circle, .name應該可以作業。
body {
background-color: snow;
box-sizing: border-box;
}
header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.611rem;
}
header .circle {
display: inline-block;
height: 1.79rem;
width: 1.79rem;
border-radius: 50%;
}
header .circle__red {
background: #ff605C;
}
header .circle__yellow {
background: #FFBD44;
}
header .circle__green {
background: #00CA4E;
}
header>* {
display: inline-block;
}<header>
<div class="circle circle__red"></div>
<div class="circle circle__yellow"></div>
<div class="circle circle__green"></div>
<div class="name">
<h3 class="name-alt">Muhammed Ali Yuruk</h3>
</div>
</header>uj5u.com熱心網友回復：
- 如果您需要，則值得商榷，
<h3因為您強制字體大小，所以我將其設為div - 您可以使用 flex display 并將其設定為使用
flex-direction. - 可以通過多種方式設定對齊或間隔的方式，這里我使用了列間距，但邊距一些這樣或 a
space-between以使它們均勻地分散在行上。 - 我洗掉了一些 CSS，因為它可能不是圓圈的最佳方式，并且確實以這種方式提供了相同的東西。
- 您沒有指定它應該如何處理小/窄螢屏，所以我讓它換行（行長文本等可能在這里起作用）
body {
background-color: snow;
box-sizing: border-box;
}
header {
display: flex;
flex-direction: row;
align-items: flex-start;
column-gap: 0.25em;
}
header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.611rem;
}
header .circle {
height: 1.79rem;
width: 1.79rem;
border-radius: 50%;
}
header .circle__red {
background: #ff605C;
}
header .circle__yellow {
background: #FFBD44;
}
header .circle__green {
background: #00CA4E;
}<body>
<header>
<div class="circle circle__red"></div>
<div class="circle circle__yellow"></div>
<div class="circle circle__green"></div>
<div class="name">
<div class="name-alt">Muhammed Ali Yuruk</div>
</div>
</header>
</body>uj5u.com熱心網友回復：
按照建議使用 flexbox 購買其他幾個可能是最好的方法
布尤特
最快/最簡單的方法：
.name { display: inline-block; }
另外，您需要從標題標簽中洗掉邊距，否則它不會看起來是行內的。
.name-alt { margin: 0; }
uj5u.com熱心網友回復：
我沒看太久，但使用 flex-box 看起來像這樣。
header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.611rem;
display: flex;
align-items: center;
}
您需要將 display 屬性應用于父容器 - 在本例中是標題，因為它包含 h3 和 div 圖示。
然后 align-items 會將其居中在相反的軸上，在這種情況下為 y 軸，因為默認方向在 x 軸上（flex-direction: row）。
uj5u.com熱心網友回復：
我同意這display: flex;將是一個簡單的解決方案。使用flex-wrap: nowrap;將防止內容轉移到下一行。
header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.611rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/454013.html