三個元素，一個左邊，一箇中心，一個右邊的標題

我剛剛開始在HTML和CSS中開發，儘管閱讀了框模型，但我仍然遇到一些定位基礎知識問題。三個元素，一個左邊，一箇中心，一個右邊的標題

我想要創建一個包含三個元素的頁眉導航欄 - 一個在頁面的左側，一個在右側，一個在中間。我希望這些元素互相內聯。

目前，他們在HTML中表示，像這樣

<body> 
<div class="header"> 
    <ul class="child"> 
     <li id="lodestone"><a href="">The Lodestone</a></li> 
     <li id="mogstation"><a href="">The Mog Station</a></li> 
     <li id="user"><a href="">User Account</a></li> 
    </ul> 
</div>

然後我試圖使用CSS的「文本對齊」屬性來對齊。

.header { 
    background-color: #ffd9e7; 
    border: black; 
    display: block; 
    box-sizing: border-box; 
} 

.header ul { 
    display: inline-block; 
} 

.header > ul > li { 
    display: inline-block; 
} 

#lodestone { 
    text-align: left; 
} 

#user { 
    text-align: right; 
} 

#mogstation { 
    text-align: center; 
}

但是，它不會產生這樣的預期結果。 The three items are aligned, next to each other, on the left.

任何人都可以推薦什麼CSS屬性我應該用來解決這個問題？我的研究表明有使用浮動的方法，但其他人推薦使用浮動方法，而當我嘗試使用浮動文本時出現問題。

來源

2017-06-03 Jeremy

如果給UL和LIS的寬度和（100微升/ 30裏S代表例子），那麼他們應該正確顯示

.header { 
 
    background-color: #ffd9e7; 
 
    border: black; 
 
    display: block; 
 
    box-sizing: border-box; 
 
} 
 

 
.header ul { 
 
    display: inline-block; 
 
    width:100%; 
 
} 
 

 
.header > ul > li { 
 
    display: inline-block; 
 
    position:relative; 
 
    vertical-align:top; 
 
    width:30%; 
 
} 
 

 
#lodestone { 
 
    text-align: left; 
 
} 
 

 
#user { 
 
    text-align: right; 
 
} 
 

 
#mogstation { 
 
    text-align: center; 
 
}

<div class="header"> 
 
    <ul class="child"> 
 
     <li id="lodestone"><a href="">The Lodestone</a></li> 
 
     <li id="mogstation"><a href="">The Mog Station</a></li> 
 
     <li id="user"><a href="">User Account</a></li> 
 
    </ul> 
 
</div>

我加了vertical-align：top;但它的過剩需求，你可能會採取了..

Fiddle

希望這有助於

來源

2017-06-03 15:28:09

謝謝你，成功了！如果你不介意回答快速跟進以幫助我理解，那麼30％的意義是什麼？它似乎建議你讓每個元素都有頁面寬度的1/3，但不會是33.3％？ – Jeremy

其實我做了另一個小提琴https://jsfiddle.net/RachGal/32z2w2zs/ –

亞們謝謝你，它會產生一個更好的結果 – Jeremy

爲什麼不把li元素設置爲寬度的三分之一？

首先使UL 100％的寬度，你還需要確保有一個在UL的右側沒有填充因爲它往往會被瀏覽器自動添加：

.header ul { 
    display: inline-block; 
    padding: 0; 
    width: 100%; 
}

然後讓每個L1 33 ％

.header > ul > li { 
    display: inline-block; 
    width: 33%; 
}

風格的要求

來源

2017-06-03 15:22:29 Daniel

看看CSS Flexbox一種不同的方法來佈置你的元素，其餘

header{ 
 
    display: flex; 
 
    justify-content: space-around; 
 
}

<header> 
 
    <div>A</div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
</header>

來源

2017-06-03 15:22:32 Ced

三個元素，一個左邊，一箇中心，一個右邊的標題

回答

相關問題