如何使用css添加空間？

Question

我有一個的jsfiddle here

我想要做的是，我想一點空間添加文本「回覆數」旁邊，這樣的文字是不是太靠近表格邊框兩邊。我還想在兩個單選按鈕旁邊的右側添加一個空格。

這是如何實現的？

感謝

Answer 1

如果添加填充：10px的你的CSS，你可以給元素足夠的空間，他們周圍，使他們不能正對着的邊界：

#replies td{ 
    border-collapse:collapse; 
    border:1px solid black; 
    padding:10px;  
}​ 

這裏是你的更新jsfiddle給你一個什麼樣子的想法。

接下來，要解決與單選按鈕的問題，周圍放置一個<span>單和多，並擺脫空間。另外，在每個輸入/量程對周圍添加一個div。然後，將它添加到您的CSS：

span { 
    padding-left:5px; 
} 

一個例子來看看這個jsfiddle。

下面是修改HTML：

<tr> 
    <td>Number of <br/>Replies: </td> 
    <td align="left"> 
     <div class="td"> 
      <input type="radio" name="reply" value="single" class="replyBtn" /> 
      <span>Single</span> 
     </div> 
     <div class="td"> 
      <input type="radio" name="reply" value="multiple" class="replyBtn" />    
      <span>Multiple</span> 
     </div> 
    </td> 
</tr> 

Answer 2

怎麼樣簡單的舊的HTML？

<table cellpadding="3">

或CSS：

#replies td, #replies th { padding: 3px; } 

在這種情況下，該表的兩個TD和TH得到這個填充（更好的格式）。

Answer 3

您可能會考慮首先更改您的標記。請勿直接向您的<td>或<th>標籤添加任何文字。有標籤添加文本。雖然您的瀏覽器會呈現文字並顯示，但這不是一個好習慣。 現在來問你的問題..該標記應該像::::

<table id="replies"> 
<tr> 
    <th colspan="2"> 
     <span>Replies</span> 
    </th> 
</tr> 
<tr> 
    <td><span>Number of </span><br/><span>Replies: </span></td> 
    <td align="left"><span><input type="radio" name="reply" value="single" class="replyBtn" />Single</span><br /><span> 
    <input type="radio" name="reply" value="multiple" class="replyBtn" /> Multiple</span></td> 
</tr> 
</table>​ 

而且你只需要添加以下到你的CSS :::

#replies span{ 
    margin:0 0 0 5px; 
} 
​ 

請參閱JSFIDDLE HERE

Answer 4

忽略使用表格佈局，這是我應該怎麼做

HTML

<table id="replies"> 
    <tr> 
    <th colspan="2">Replies</th> 
    </tr> 
    <tr> 
     <td>Number of <br/>Replies: </td> 
     <td align="left"> 
      <input type="radio" name="reply" value="single" class="replyBtn" id="reply_single" /> 
      <label for="reply_single">Single</label><br /> 
      <input type="radio" name="reply" value="multiple" class="replyBtn" id="reply_multiple" /> 
      <label for="reply_multiple">Multiple</label> 
     </td> 
    </tr> 
</table> 

CSS

#replies td 
{ 
    padding:5px; 
    border-collapse:collapse; 
    border:1px solid black;  
} 

#replies input:radio 
{ 
    margin-right:5px; 
} 

Fiddle