在一條線上的幾個盒子的HTML佈局

我打破了這個看似簡單的問題，也許有人可以提供幫助。我想要任意數量的輸入，並將標籤水平堆疊在圖像中的一條線上。在一條線上的幾個盒子的HTML佈局

enter image description here

來源

2012-11-06 user1803763

什麼代碼，你使用已經試過嗎？ – SamHuckaby

很多div和表的組合，但總會出現一些錯誤。尤其是帶有輸入標籤的固定標籤填充空間的其餘部分是有問題的。 – user1803763

是否有瀏覽器限制？（應該這項工作在一個IE嗎？） –

有多種方法去了解這一點。就個人而言，我喜歡使用這種類型的數據表（但如果它不是表格數據，建議使用其他方式，如DIV）。我會盡力表現出表的一個簡單的例子：

表：

<table width="100%" cellpadding="0" callspacing="0" border="0"> 
<tr> 
    <td width="200">LABEL 1</td><td>&nbsp;</td> <!-- this is the padding table cell --> 
    <td width="200">LABEL 2</td><td>&nbsp;</td> 
    <td width="200">LABEL 3</td><td>&nbsp;</td> 
</tr> 
</table>

Example Table JSFiddle

採用DIV的是稍微有點複雜，因爲它們是內嵌在默認情況下;你會在不同的線路上得到你的標籤。您可以查看CSS的屬性，例如「display：table-cell」以獲得與上述相同的結果，否則您可以使用CSS查看絕對和相對定位。

<div width="100%"> 
<div style="position:absolute; top:0px; width: 33%;">LABEL 1</div> 
<div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div> 
<div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div> 
</div>

但是，仍然存在一些問題，因爲它假設您的佈局是頁面/瀏覽器查看區域的寬度的100％。

來源

2012-11-06 17:05:36

這並不考慮到固定有用於標籤和填充與輸入 – user1803763

的可用空間的其餘部分只需添加3多個表格單元的，第一個是固定寬度，所述其次是動態的。事實上，除了固定寬度單元格外，您不必指定任何td寬度。如果您想嘗試，請更新答案。 –

這種類型的經典「GUI小部件佈局引擎」佈局的最佳選擇是CSS 3 flexbox功能，但瀏覽器支持還不夠一致，我建議使用它。

缺乏這一點，靈活的「填充空間」佈局通常需要表格佈局。由於CSS display，沒有必要將表格編寫爲HTML表格。下面的例子是類似於您的示例圖像：

<html><head> 
 
<title>example</title> 
 
    <style type="text/css"> 
 
    ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; } 
 
    .myform li { display: table-cell; border: .1em solid gray; } 
 
    .myform li > * { display: table; width: auto; margin: .4em; } 
 
    .myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; } 
 
    .myform input { display: table-cell; width: 100%; } 
 
    .col1 { width: 33%; } 
 
    .col2 { width: 33%; } 
 
    .col3 { width: 34%; } 
 
    </style> 
 
</head><body> 
 
    <form> 
 
    <ul class="myform"> 
 
     <li class="col1"><span><label for="a">Label</label>    <input id="a" name="a"></span></li> 
 
     <li class="col2"><span><label for="b">Label</label>    <input id="b" name="c"></span></li> 
 
     <li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li> 
 
    </ul> 
 
    </form> 
 
</body></html>

正好有隻在標記佈局引入了一個元素：需要的<span>作爲表細胞內的表。

標籤單元格的width: 1%;不是實際尺寸，只是簡單地強制它儘可能縮小（絕對值而不是百分比值，不會有相同的效果）。 white-space: nowrap;防止標籤因此被纏繞。

.col1等用於指定列的寬度。

來源

2012-11-06 19:19:39

謝謝，那是它！ – user1803763

儘管有些元素可以用於輸入，但是可以調整包含框的大小。例如，我使用下拉框輸入內容，當內部標籤很長時，即使指定了寬度，它也會更改父框的大小。 – user1803763

您可能需要引入另一個包含輸入控件的元素並設置其大小，然後 - 將表單控件直接轉換爲表格單元格有點兒有趣。或者@羅曼的做法更好。 –

編輯：更新爲解決固定寬度標籤。（任意地設定爲100px）

http://jsfiddle.net/SebastianPataneMasuelli/XHrSr/

HTML：

<div> 
<div> 
    <div class="label">LABEL</div> 
    <div>filler</div> 
</div> 
    <div> 
    <div class="label">LABEL</div> 
    <div>filler</div> 
</div> 
    <div> 
    <div class="label">LABEL</div> 
    <div>filler</div> 
</div> 
</div>

CSS：

div { width: 100%; } 
div div { 
    width: 33%; 
    background-color: salmon; 
    float: left; 
    position: relative 
} 
div div div { 
    background-color: pink; 
    position: relative; 
    z-index: 2 
} 
div div div:last-child { 
    background-color: red; 
    position: absolute; 
    width: 100%; 
    z-index: 1 
} 
.label { width: 100px }

來源

2012-11-06 19:39:51

否，因爲標籤寬度不固定。它隨着箱子的大小延伸。 – user1803763

好的，編輯來解決這個問題，現在就試試吧。 –

通常，WH你需要一些東西來「佔用剩餘空間」（比如你的輸入框），你有3個選擇：

Flexbox，這將是理想的，但尚未得到廣泛的支持。
表，在凱文Reids像解釋回答
建立下面

HTML

<div class="container"> 
    <div class="field"> 
     <label for="in1">Label</label> 
     <div><input type="text" id="in1"></div> 
    </div> 
    <div class="field"> 
     <label for="in2">Label</label> 
     <div><input type="text" id="in2"></div> 
    </div> 
    <div class="field"> 
     <label for="in3">Label</label> 
     <div><input type="text" id="in3"></div> 
    </div> 
</div>

CSS

.container { 
    padding: 20px; 
    background: #999; 
    overflow: hidden; /* for float containment */ 
} 

.field { 
    padding: 4px; 
    background: #fff; 
    border: 2px solid #999; 
    float: left;   
    width: 33%; 
    -webkit-box-sizing: border-box; /* 33% effective width */ 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

label { 
    float: left; 
    width: 100px; /* fixed width of label */ 
} 

.field div { 
    overflow: hidden; /* create a new Block Formatting Context */ 
} 

/* inputs fill the new BFC */ 
input { 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

只有1加入佈局元件分開，例如，這將是包裝input的div。這是因爲input不希望表現得像塊元素even if you tell him to do so。

小提琴：http://jsfiddle.net/RqzJC/

來源

2012-11-07 09:44:42 Roman

在一條線上的幾個盒子的HTML佈局

回答

相關問題