Question

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

我设法设置了一些东西，但我真的很难设置输入/选择字段的特定宽度（px很好，但％会更好）使用CSS。我猜它有某种特殊性问题但是无法弄明白。非常感谢帮助。

<!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>

Answer 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/

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

在css中设置select和input元素的宽度

1 个答案: