在css中设置选择和输入元素的宽度答案

【问题标题】：Setting width of select and input elements in css在css中设置选择和输入元素的宽度
【发布时间】：2013-10-27 23:02:32
【问题描述】：

我是学习 CSS/HTML 的新手（以及这个网站！），我正在尝试设计一些基本的输入字段作为练习。

我已经设法设置了一些东西，但我真的很难使用 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>

【问题讨论】：

标签： html css select input width

【解决方案1】：

您的选择输入 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/

您可能还注意到在 Fiddle 中 <select> 和 <input> 的宽度不同，您可以使用 <select> 元素上的 box-sizing:content-box; 进行调整

【讨论】：

完美地解决了这个问题——我对 > 标签有点过火了。我现在有一个新问题 - 第二个输入字段不太适合该行。我已经尝试删除填充、边框、尝试 box-sizing 标签，但仍然无法使其正常工作。我已经取得了进步jsfiddle.net/ZxRAu（那个网站有多酷！？）。很抱歉让您感到痛苦 - 再次感谢您的帮助。