在CSS中設置選擇和輸入元素的寬度

我是新來學習CSS/HTML（和本網站！），並試圖設計一些基本的輸入字段作爲練習。在CSS中設置選擇和輸入元素的寬度

我已經設法設置了一些東西，但我真的很努力地使用CSS設置輸入/選擇字段的特定寬度（px很好，但％會更好）。我猜測它是一種特殊性問題，但無法弄清楚。幫助將不勝感激。

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
.generalcontainer { 
    width:65%; 
    margin:5%; 
    height:600px; 
    float:left; 
    background-color: #CCCCCC; 
} 
.generalcontainer > span { 
    font-family: Calibri; 
    font-size: 14px; 
    padding: 4px; 
} 
.generalcontainer > span.header { 
    font-weight: bold; 
    color: #fff; 
    background-color: blue; 
    display: block; 
} 
.generalcontainer > span.subheader { 
    background-color: gray; 
    display: block; 
    color: #000000; 
    font-weight: bold; 
} 
.generalcontainer > span.label { 
    color: #000000; 
    font-weight: normal; 
    display: inline-block; 
    width:25%; 
} 
.smallentryfield > select input{ 
    color: #000000; 
    font-weight: bold; 
    width: 500px; 
    float: left; 
    padding: 4px; 
} 
</style> 
</head> 

<body> 
<div class="generalcontainer"> 
<span class="header">Basic Information</span> 
<span class="subheader">Client</span> 
<span class="label">First name</span> 
    <select class="smallentryfield"> 
    <option value=""></option> 
    <option selected="selected" value="Mr">Mr</option> 
    <option value="Mrs">Mrs</option>  
    </select> 
    <span class="label">First name</span> 
    <input type="text"> 
    </input> 
</div> 
</body> 
</html>

來源

2013-10-19 Winters

你選擇輸入CSS選擇幾乎沒有，但你的，它是在尋找：

/** 
* Find class of .smallentryfield, 
*  child element of .smallentryfield (The: >) 
*   find <select> (with .smallentryfield as parent) 
*   find input (with <select> as parent) 
**/ 
.smallentryfield > select input { 
    //.. 
}

儘管它通過上面的整個選擇過程中去，麻煩的是 - 它會只有修改並選擇鏈接末尾的<input>。相反：

/** 
* Find a <select> class with .smallentryfield 
* or (Hence the ,) 
* Find an <input> with a parent of .genercontainer 
**/ 
select.smallentryfield, .generalcontainer input { 
    color: #000000; 
    font-weight: bold; 
    width: 97%; 
    float: left; 
    padding: 4px; 
}

小提琴：http://jsfiddle.net/TnQky/1/

您也可能會注意到在小提琴的<select>和<input>是不同的寬度，你可以用box-sizing:content-box;的<select>元素

來源

2013-10-19 00:29:41 MackieeE

這解決了在調整這問題完美 - 我用>標籤過度了一點。我現在有一個新問題 - 第二個輸入字段不太適合該行。我嘗試刪除填充，邊框，嘗試框大小的標籤，但仍然無法使其工作。我做了一個進步jsfiddle http://jsfiddle.net/ZxRAu/（這個網站多酷！？）。對不起是一個痛苦 - 任何幫助再次讚賞。 – Winters

http://jsfiddle.net/ZxRAu/6/喜歡這個？ – MackieeE

在CSS中設置選擇和輸入元素的寬度

回答

相關問題