Question

我有一个jsfiddle here

我想要做的是我想在文本“回复数量”旁边添加一些空格，以便文本不会太靠近任何一侧的表格边框。我还想在两个单选按钮旁边的右侧添加一个空格。

如何实现这一目标？

由于

Answer 1

如果你向你的CSS添加填充：10px，你可以为它们提供足够的空间，使它们不会对着边界：

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

这是您更新后的jsfiddle，可让您了解其外观。

接下来，要解决单选按钮的问题，请将<span>放在Single和Multiple周围，然后摆脱空间。此外，在每个输入/跨度对周围添加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 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

Answer 3

简单的旧HTML怎么样？

<table cellpadding="3">

或CSS：

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

在这种情况下，此表的TD和TH都会获得此填充（更好的格式化）。

Answer 4

您可以考虑先对标记进行更改。请勿将任何文字直接添加到您的<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

如何使用css添加空间？

4 个答案: