如何在不使用最大寬度的情況下對齊標籤？

這裏是提琴：https://jsfiddle.net/udyzyoq6/如何在不使用最大寬度的情況下對齊標籤？

綠框是我想達到
紅框失敗例子

HTML（未能爲例）什麼：

<div class="parent"> 
    <div class="square"></div> 
    <label class="label"> 
    Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum 
    </label> 
</div>

CSS （舉例失敗）：

.parent { 
    width: 300px; 
    border: solid 1px red; 
} 

.square { 
    width: 15px; 
    height: 15px; 
    background-color: blue; 
    display: inline-block; 
    vertical-align: middle; 
} 

.label { 
    display: inline-block; 
    vertical-align: middle; 
}

enter image description here

我不想設定標籤上max-width - 我只是希望它自動使用.parent（300像素，15像素）的所有可用空間。在我的例子中，如果我不會在標籤上設置max-width，那麼長文本會中斷佈局（如紅框）。

編輯：我不想設置任何元件上的任何固定的寬度除.parent（寬度= 300像素）和.square（寬度= 15像素，高= 15像素）。我希望它自動/動態調整到.parent容器寬度。

來源

2015-06-17 user606521

也許是這樣嗎？ https://jsfiddle.net/soledar10/fseu83gf/ – Dmitriy

如果您要堅持垂直對齊，請記住它只適用於display：table相關規則。否則，只需刪除它。 – madagalbiati

爲什麼這麼多標記？你可以用一個'label'來做到這一點。 –

使用display: table

.parent { 
 
    width: 300px; 
 
    border: solid 1px green; 
 
    display: table; 
 
} 
 

 
.parent.error-frame { 
 
    border-color: red; 
 
} 
 
.parent > div{ 
 
    display: table-cell; 
 
} 
 
.parent > div:nth-of-type(1){ 
 
    vertical-align: middle; 
 
} 
 
.square { 
 
    width: 15px; 
 
    height: 15px; 
 
    background-color: blue; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.label { 
 
    display: inline-block; 
 
    vertical-align: middle;  
 
    padding-left: 5px; 
 
}

<div class="parent"> 
 
    <div> 
 
     <div class="square"></div> 
 
    </div> 
 
    <div> 
 
     <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>   
 
    </div> 
 
</div> 
 
<br> 
 
<div class="parent"> 
 
    <div> 
 
     <div class="square"></div> 
 
    </div> 
 
    <div> 
 
     <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>   
 
    </div> 
 
</div>

來源

2015-06-17 14:56:04 Dmitriy

只需從.label類中刪除最大寬度：250像素 - 它沒有它的工作。 – user606521

您無需設置max-width。由於您使用的是設置的像素寬度，因此只需將標籤類上的width設置爲您需要的任何像素寬度，在本例中爲285px。

Fiddle so you can see it.

來源

2015-06-17 14:06:09 9Deuce

當父母不是300px時，這是行不通的。只是一個例子，他希望標籤佔據所有父寬度 –

我不想在任何元素上設置任何固定的寬度，但父母和方形，這就是問題 – user606521

編輯我的問題 – user606521

您可以通過使用flexbox實現這一佈局：

添加display: flex;到.parent，這道出了孩子們使用flexbox模型
添加到.parent，這將垂直對齊孩子們
加flex: 1;到.label-without-max-width，這個會告訴它採取了必要的空間大小

.parent { 
 
    align-items: center; 
 
    border: solid 1px green; 
 
    display: flex; 
 
    width: 300px; 
 
} 
 
.parent.error-frame { 
 
    border-color: red; 
 
} 
 
.square { 
 
    background-color: blue; 
 
    height: 15px; 
 
    width: 15px; 
 
} 
 
.label { 
 
    max-width: 250px; 
 
} 
 
.label-without-max-width { 
 
    flex: 1; 
 
    max-width: none; 
 
}

<div class="parent"> 
 
    <div class="square"></div> 
 
    <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label> 
 
</div> 
 
<br> 
 
<div class="parent error-frame"> 
 
    <div class="square"></div> 
 
    <label class="label label-without-max-width">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label> 
 
</div>

爲flexbox的支持是相當不錯的（減去舊版本的IE）http://caniuse.com/#feat=flexbox

來源

2015-06-17 14:31:56

嘿，你的回答對我有用，但迪米特里提到了另一種方法（在評論中）https://jsfiddle.net/soledar10/rys6tn pg /它也可以工作，並且AFAIK它有更好的瀏覽器支持（IE9 +而不是IE10 + flex） – user606521

沒問題，@如果你需要更老的IE支持，Dmitriy的解決方案就是要走的路。 :) –

如何在不使用最大寬度的情況下對齊標籤？

回答

相關問題