CSS - 如何將2個字段對齊到1行？

我是css新手。我的jsfiddle這裏 http://jsfiddle.net/PAHdH/CSS - 如何將2個字段對齊到1行？

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

我想改變

姓名：John年齡：35
等級：60積分：5000

應該是這樣一張桌子有4列。

來源

2012-11-16 user1809157

鑑於你接受的答案，爲什麼不使用一個表呢？在這種情況下，它會產生語義意義。 –

Demo

嗨，現在你標記爲錯誤請更改爲標記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; 
}

Live Demo

來源

2012-11-16 04:52:08

我認爲OP不是在這種格式之後。從他的問題看來，第一行應該是：Name |約翰|年齡| 35，第二行Level | 60 |分數| 5000 –

是的，這是我需要的除了背景顏色:) 謝謝！ – user1809157

使用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-16 04:49:16

我不認爲你甚至需要修改CSS，擺脫< p的>

當然標籤應真正連接到<輸入>元素

<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-16 04:52:02 CodeBro

你可以以這種方式使用。

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-16 04:56:41 Vikas

如前所述，其可疑的label的東西，是不是一個表單元素相關聯。這可能更適合於definition list。在這裏使用表格也可能在語義上是正確的，因爲您將表格數據顯示爲表格。

定義列表舉例

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-16 05:34:18

CSS - 如何將2個字段對齊到1行？

回答

相關問題