1

私はcssが初めてです。ここの私のjsfiddle http://jsfiddle.net/PAHdH/

<div>
    <label>Name: </label><p>John</p>
    <label>Age: </label><p>35</p>
    <label>Level: </label><p>60</p>
    <label>Score: </label><p>5000</p>
</div>

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
    color:black;
}

p {margin-bottom:2px; padding:0;}

</p>

に変更したい

名前: ジョン 年齢: 35
レベル: 60 スコア: 5000

4 列のテーブルのようになるはずです。

4

5 に答える 5

2

デモ

こんにちは、あなたのマークアップが間違っています。マークアップの html と cssを変更してください。

このように

HTML

<div>
   <p> <label>Name: </label>
       <span>John</span>
       <label>Age: </label><span>35</span></p>


    <p><label>Level: </label><span>60</span>
        <label>Score: </label><span>5000</span></p>
</div>

CSS

label, span{
float:left;
    margin:1px;
    background:rgba(0,0,0,0.3);
        width:150px;
    padding:2px;
}
p{
overflow:hidden;
}

ライブデモ

于 2012-11-16T04:52:08.590 に答える
0

このように使用できます。

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 150px;
    text-align: left;
    color:black;
}


span {margin-bottom:2px; padding:0;margin-left:10px;}


<div>
    <label>Name:<span>John</span><span>Age:</span><span>35</span></label>
</div>
于 2012-11-16T04:56:41.613 に答える
0

P を使用すると、要素の前後に改行が生成されるため、この考えが回避されます。これが役立つことを願っています。

<div> 
  <p>
    <label>Name: <span>John</span></label>
    <label>Age: <span>35</span></label>
  </p>
  <p>
    <label>Level: <span>60</span></label>
    <label>Score: <span>5000</span></label>
  </p>
</div>

新しい行を作成する必要がある場所で P を使用し、P を SPAN に変更しました。CSS は次のとおりです。

label {
    float: left;
    width: 150px;
    text-align: left;
    color:black;
    border:#000 1px solid;
}

span {margin-bottom:2px; padding:0; }
p { clear:both; }
于 2012-11-16T04:49:16.193 に答える
0

CSS を変更する必要さえないと思います。<p> を削除してください。

もちろん、ラベルは実際には <input> 要素に接続する必要があります

<label for="name">John</label>
<span id="name">male<span>
<label for="age">Age</label>
<span id="age">35<span>

<br/>

<label for="level">Level</label>
<span id="level">100<span>
<label for="score">Score</label>
<span id="score">1000<span>

与える

ジョン男 年齢 35
レベル 100 スコア 1000

後知恵として、本当に <p> を使用したい場合は、スタイルを使用してください

p { display: inline-block;}​
于 2012-11-16T04:52:02.320 に答える
0

すでに述べたようにlabel、フォーム要素ではないものに関連付けるのは疑わしいです。これは、定義リストにより適している場合があります。テーブルとして表示する表形式のデータがあるため、ここでテーブルを使用することも意味的に正しい場合があります。

定義リストの例

HTML

<dl>
    <dt>Name:</dt>
    <dd>Jon</dd>
    <dt>Age:</dt>
    <dd>35</dd>
    <dt>Level:</dt>
    <dd>10</dd>
    <dt>Score:</dt>
    <dd>100</dd>
</dl>

CSS

dl
{
    position:releative;
}


dd
{
    float:left;
    width:40%;
}

dt
{
    float:left;
    width:10%;
    font-weight:bold;
}

フィドル: http://jsfiddle.net/xwavM/

テーブルの例

<table>
   <tbody>
      <tr> 
         <th>Name:</th>
         <td>John</td>
         <th>Age:</th>
         <td>35</td>
      </tr>
      <tr> 
         <th>Level:</th>
         <td>100</td>
         <th>Score</th>
         <td>100</td>
      </tr>
   </tbody>
</table>
于 2012-11-16T05:34:18.470 に答える