員工登記表格的CSS塊

您好，我正在創建一個簡單的表單來輸入員工信息。僱員有以下特點：員工登記表格的CSS塊

名
姓
年齡
SSN
性別
賽
等...

有是我想要的大約20個物產顯示一個標籤和文本框（有些有下拉菜單）。我不想使用表格，因爲我已經閱讀了使用<div>元素的CSS，並且CSS更好，所以我想借此機會學習。有些領域非常廣泛（地址1，地址2），其他領域非常狹窄（先生/女士）。

現在所有的標籤/輸入對的設置是這樣的：

<div class="data-container"> 

    <div class="data-row"> 
    <div class="data-label> 
     <!-- label --> 
    </div> 
    <div class="data-input> 
     <!-- textbox --> 
    </div> 
    </div> 

    <!-- many more label/input pairs here --> 

    <!-- Submit --> <!-- Cancel --> 


</div>

我希望每個「數據行」是在一個單獨的水平寬度可變排在底部有一個提交和一個取消按鈕，我想要那些居中，並在同一行。

我試着設置這個CSS

.data-row 
{ 
    display: block; 
    clear: both; 
} 

.data-label, 
.data-input 
{ 
    float: left; 
}

不過，即使他們繼續環繞整個容器，所以我不能在一排，然後4坐上未來3個輸入行塊顯示，然後再增加3個，依此類推。我怎樣才能正確地做到這一點？

來源

2010-10-01 John

嘗試添加overflow: hidden;

.data-row 
{ 
    display: block; 
    clear: both; 
    overflow: hidden; 
}

來源

2010-10-01 02:16:28 Reigel

由於它的工作！順便說一句，你知道爲什麼如果我設置輸入{寬度：100px; }並選擇{width：100px; }選擇出來4px更小？ – John 2010-10-01 02:22:47

小於?? – Reigel 2010-10-01 02:25:20

比「輸入」的寬度更窄 – John 2010-10-01 02:26:23

我建議，爲簡單起見，使用嵌套在form元件內的ul，並使用簡單的HTML表格元素：

<form action="" method="post"> 
<ul> 
    <li><label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" /></li> 
    <li><label for="familyName">Family Name:</label><input type="text" name="familyName" id="familyName" /></li> 
    <li><label for="age">Age:</label><input type="number" name="age" id="age" /></li> 
    <li><label for="ssn">SSN:</label><input type="text" name="ssn" id="ssn" /></li> 
    <li><label for="gender">First Name:</label><input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" />Female</li> 
    <li><label for="streetAddress"><input type="text" id="streetAddress" name="streetAddress" /></li> 

</ul> 
</form>

夫婦上述與以下css：

form ul { 
list-style-type: none; 
}

，您可以在單獨的水平變寬行上免費獲得data-row。我意識到它是一個不同的HTML結構，但它似乎有好處，包括在一行上的多個input元素（只要你不在你的CSS中display: block）。

來源

2010-10-01 02:17:31

不知道我完全理解這個問題，但我認爲你想能夠顯示在容器div中左浮動的多個div。在你的代碼中你需要做兩件事來實現它：1 - 在類名'data-label'和'data-input'的標記中缺少一對雙引號。 2 - 將「display：inline」添加到浮動的css聲明中。這應該夠了吧。

這裏有一個鏈接：http://jsfiddle.net/KMH6f/

來源

2010-10-01 02:22:03

員工登記表格的CSS塊

回答

相關問題