多個標籤的對齊 - HTML，CSS

我現在所擁有的：

HTML：

<div class="personalinformation"> 
<label for="" class="info">Firstname:</label> 
<label for="">Bill</label> 
</div> 

<div class="personalinformation"> 
<label for="" class="info">Lastname:</label> 
<label for="">Gates</label> 
</div> 

<div class="personalinformation"> 
<label for="" class="info">Country:</label> 
<label for="">France</label> 
</div>

CSS：

.personalinformation { 
text-align: center; 
margin-left: auto; 
text-justify: inter-word; 
margin: 0 auto 1em auto; 
} 

.info { 
font-weight: bold; 
text-align: left; 
margin-right: 50px; 
}

如何讓我的標籤，這樣的排列：

來源

2017-04-14 pPeter

您需要爲每個標籤設置一個固定寬度和float左側屬性。看片段： http://www.bootply.com/wEqBL8Tvo0

問候

來源

2017-04-14 15:28:07 robertina

如果我想擁有像你這樣的所有標籤，但在頁面的中心位置，該怎麼辦？ – pPeter

設置一個容器div，其中包含所有內容，設置一個特定的寬度並使用margin屬性的自動屬性。看：http://www.bootply.com/q9x6cX9dFj – robertina

但你有多餘的空間，在右邊的div容器所以只有DIV居中，但文字是不是。 – Darren

標籤旨在用於表單輸入。你真的在這裏做更多的定義列表。嘗試：

<dl class="personalinformation"> 
    <dt class="info">Firstname:</dt> 
    <dd>Bill</dd> 
</dl> 
<dl class="information"> 
    <dt class="info">Lastname:</dt> 
    <dd>Gates</dd> 
    <dt class="info">Country:</dt> 
    <dd>France</dd> 
</dl>

的東西，如

dt,dd{display:inline-block; width:40%} 
dl{margin: 0} 
dt{text-align:left} 
dd{text-align:right}

來源

2017-04-14 15:22:11

不改變你的HTML，您可以向info類CSS給一個固定的寬度：

.info { 
    font-weight: bold; 
    text-align: left; 
    width: 100px; //change this to what you want 
    display: inline-block; 
}

見fiddle。

來源

2017-04-14 15:24:18 Darren

如果我想擁有所有的標籤就像你有他們，但在頁面的中心？ – pPeter

我可能會將您的HTML更改爲'table'元素，並在'table'上放置一個'margin：0 auto'。請參閱[更新的小提琴]（https://jsfiddle.net/darienh/c2dbbfmq/1/）。 – Darren

多個標籤的對齊 - HTML，CSS

回答

相關問題