12

欲しかった結果

私の目標は、添付の画像に示すように配置することです (左側のフィールドの幅は任意ですが、右側のフィールドは同じX座標から開始する必要があります)。

現在、これを実現するために単純なテーブル コードを使用しています。

<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>

しかし、テーブルを使うのは一般的に悪いと聞いたことがあります。CSS を使用して同じデザインを実現する方法はありますか? この Web サイトは、高度な CSS をサポートしていないモバイル デバイス用に設計されているため、コードはできるだけシンプルにする必要があります。

編集：私が作成したときのように（おそらく）HTMLを使い始めたばかりの人から、この質問に関する通知をまだ時々受け取るので、これが達成するためのはるかに最良の方法であるため、BTによって受け入れられた回答を参照してくださいこの機能。「可能な重複」(2016 年 5 月 31 日) として提案された質問は、現在、テーブル行/テーブル列の CSS ベースのアプローチを提供しておらず、推測作業を行う必要があります。

これが本当の解決策です（他のクールなCSS3のものを使用）：

#fixed-square {
position: fixed;
top: 0;
right: 0;
z-index: 9500;
cursor: pointer;
width: 24px;
padding: 18px 18px 14px;
opacity: 0.618;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.145s ease-out;
-moz-transition: all 0.145s ease-out;
-ms-transition: all 0.145s ease-out;
transition: all 0.145s ease-out;
}

top:0とright: 0 に注意してください。それが私のためにそれをしたものです。

4

5 に答える 5

5

テーブルで同じことを達成することは可能ですが、レイアウトの目的でテーブルを使用することは意味的に正しくないと考えられます。特に、1 ～ 2 行の CSS を使用して同じことを実現できるためです。

ラベルに固定幅 (最も長いラベル テキストよりも大きいもの) を付けます。

<style>
label {
    width: 100px;
    display: inline-block;
}​
</style>

<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />​

例

于 2012-06-13T19:02:38.957 に答える
5

ここでは、必要な出力を取得するためにこれを使用できます。

表の使用 IMO は悪い習慣ではありません。実際、表形式のデータが必要な場合や、データの形式が表に似ている場合に使用する必要があります。

ただし、表を使用してページ全体をデザインしたり、表形式で表示されないものをデザインしたりすることは推奨されておらず、実際には非常に間違っています。非テーブル構造を使用したサンプルを次に示します。

HTML :

<form>
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" />
    <br/><br />
    <label>Password: </label><input type="password" id="password"  placeholder="*"/>
</form>

CSS:

label {
    width: 80px;
    display: block;
    vertical-align: middle;
    float:left;
    clear:left;
}
input {
    border-top-left-radius:5px;
    border-bottom-right-radius: 10px;
    background: #141414;
    color: #fdd56c;
    outline: none;
}

ここに例があります

于 2012-06-13T19:18:18.830 に答える
3

はい、そのような配置は可能です。CSS クラスを使用すると、表を使用する (またはマークアップの見栄えを悪くする) という頭痛の種なしに、同じ表の外観を実現する方法で HTML をマークアップできます。

この CSS の使用:

.label {
    display: inline-block;
    width: 100px;
}

.inputBox {
    width: 200px;
}

そしてこのHTML：

<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>

必要なレイアウトが得られます。

IE7 サポートでこれを行うには、上記の CSS を次のように変更します。

.label {
    display: block;
    width: 100px;
    float: left;
    clear: left;
}

次に、すでに表示されている行の下に次の行を追加します。

<div style="clear: left"></div>

IE7 互換設定の使用例: http://jsfiddle.net/bbXXp/

于 2012-06-13T19:03:09.530 に答える
0

真実。私はそれを難し​​い方法で学んでいます。私は位置合わせにテーブルを使用しましたが、現在、特定の位置合わせが小さな画面 (携帯電話、タブレットなど) で奇妙になっています。したがって、divに切り替えています。<div style="display:inline-block">...</div>画面が小さい場合に自動的に整列される、好ましい使用。したがって、私のアドバイスは、Table は本物のテーブルにのみ使用し、ボディ内のコントロールを整列させるために使用しないことです。

于 2016-10-21T06:53:05.083 に答える