如何使用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