我有这个表格……
<form method="post" action="<?PHP echo htmlentities($_SERVER['PHP_SELF']); ?>"> <fieldset> <legend>Who are you?</legend> <label for="first-name">First name</label><input type="text" name="first_name" required /><br /> <label for="last-name">Surname</label><input type="text" name="last_name" required /><br /> <label for="email">E-mail</label><input type="email" name="email" required /><br /> <input type="button" name="submit1" id="submit1" value="Next" /> <input type="button" name="clear" id="clear" value="Clear" /> </fieldset> </form>
有了这个CSS ……
form {
margin: 24px 0 0 0;
}
form legend {
font-size: 1.125em;
font-weight: bold;
}
form fieldset {
margin: 0 0 32px 0;
padding: 8px;
border: 1px solid #ccc;
}
form label {
float: left;
width: 125px;
}
form label,form input {
margin: 5px 0;
}
我正在寻找一种简单的方法来使输入字段流畅,以便输入元素的宽度始终相对于fieldset元素的宽度.换句话说,标签(125px)和输入元素的宽度应始终为fieldset元素宽度的100％.有没有一种简单的方法(不添加div)？
解决方法
见：
http://jsfiddle.net/thirtydot/pk3GP/
您可以通过在每个输入周围添加无害的小跨度来执行此操作：
<span><input type="text" name="first_name" required /></span>
而这个新的CSS：
form input {
width: 100%;
}
form span {
display: block;
overflow: hidden;
padding: 0 5px 0 0;
}
