yếu tố đầu vào Lỏng

Question

Tôi có mẫu đơn này ...

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

Với CSS này ...

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; 
} 

Tôi đang tìm kiếm một cách dễ dàng để làm đầu vào các trường chất lỏng do đó độ rộng của các yếu tố đầu vào luôn luôn liên quan đến chiều rộng của phần tử fieldset. Nói cách khác, chiều rộng của nhãn (125px) và phần tử đầu vào phải luôn là 100% chiều rộng của phần tử fieldset. Có cách nào dễ dàng để làm điều này (mà không cần thêm div)?

Answer 1

Xem:http://jsfiddle.net/thirtydot/pk3GP/

Bạn có thể làm điều này bằng cách thêm một vô hại ít span xung quanh mỗi input:

<span><input type="text" name="first_name" required /></span> 

Và CSS mới này:

form input { 
    width: 100%; 
} 
form span { 
    display: block; 
    overflow: hidden; 
    padding: 0 5px 0 0; 
}