在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中设置选择和输入元素的宽度

回答

相关问题