0

私は次のフォームを持っています。なしでこの外観を作成するにはどうすればよいですか<table>。ありがとう

<table>
<tr><td><label for="firstname">First Name</label></td><td><input type="text" name="firstname" id="firstname" /></td></tr>
<tr><td><label for="lastname">Last Name</label></td><td><input type="text" name="lastname" id="firstname" /></td></tr>
<tr><td><label for="phone">Phone</label></td><td><input type="text" name="phone" id="phone" /></td></tr>
<tr><td><label for="email">Email</label></td><td><input type="text" name="email" id="email" /></td></tr>
<tr><td><label for="address">address</label></td><td><input type="text" name="address" id="address" /></td></tr>
<tr><td><label for="city">City</label></td><td><input type="text" name="city" id="city" /></td></tr>
<tr><td><label for="State">state</label></td><td><input type="text" name="state" id="state" /></td></tr>
</table>
4

4 に答える 4

1

これは基本的なスタイリングには十分です：

input {
    display: block;
}
label {
    width: 100px; /* whatever value you wish */
    float: left;
}

これがどのように機能するかはhttp://dabblet.com/gist/2794359で確認できます。

.label {width:30px;}確かにそれをしません。まず第一に、あなたが書くとき.label、それはlabelと呼ばれるクラスを持つ要素を選択するからです。次に、ドットを使用しなかった場合でも、label要素はデフォルトでインライン要素であるため、ドットに幅を設定しても、ドットを指定しないと役に立ちませんdisplay: block（フローティングでもうまくいきます）。

于 2012-05-26T15:42:35.403 に答える
0

次のスタイルを使用できます。

CSSマークアップ：

.divContainer 
{
    display: table;
}

.divRow  
 {
    display: table-row;
}

.divColumn 
{
    display: table-cell;
}

HTMLマークアップ：

<div class="divContainer">
    <div class="divRow">
        <div class="divColumn">
            <label for="firstname">First Name</label>
        </div>
        <div class="divColumn">
            <label for="lastname">Last Name</label>
        </div>
    </div>
</div>
于 2012-05-26T15:46:25.537 に答える
0

サンプルHTML：

<div id="container">
    <div class="row">
        <div>
            <label for="firstname">First Name</label>
        </div>
        <div>
            <input type="text" name="firstname" id="firstname"/>
        </div>
    </div>
    <div class="row">
        <div>
            <label for="lastname">Last Name</label>
        </div>
        <div>
            <input type="text" name="lastname" id="firstname"/>
        </div>
    </div>
<div/>

CSS：

.row {
    width: 100%;
}

.row > div:first-child {
    width: 20%;
    float: left;
}

.row > div:last-child {
    float: left;
    width: 80%;
}

jsFiddle： http: //jsfiddle.net/Q4g2u/1/ </ p>

于 2012-05-26T16:05:46.037 に答える
0

宗教的な問題は別として、テーブルマークアップを使用せずにフォームなどの表形式のデータをフォーマットする理由はありません。ただし、必要に応じて、LuisSánchezの回答で説明されている手法が最も近いですが、これはCSSでテーブルをシミュレートしているだけで、ブラウザーのサポートはさらに制限されています。

于 2012-05-26T17:10:50.160 に答える