css - 在 DIV 中对齐“收音机”和“评论”

Question

当单选按钮被选中并在帖子中成功更新时，“成功”出现在单选按钮下方，我希望它直接出现在单选按钮的右侧。

我尝试创建一个 100% 的 DIV，然后在 10% 和 90% 内创建 2 个 div

<div style="width:100%">
<div style="width:10%">  <input type='radio' name="_chkBox" checked="checked" onclick='$("#clientId").val("@client.Id");'/>  </div>
<div style="width:90%">  <p style="color:Green;">Success</p>  </div>
</div>

Answer 1

您可以按如下方式简化标记：

<div>
    <input type='radio' name="_chkBox" />
    <span style="color:green;">Success</span>
</div>

如果将p标签替换为span，则无需担心p标签上的默认边距。

如果您需要添加垂直填充和边距以进行样式display: inline-block设置，您可以申请。span

演示地址：http: //jsfiddle.net/audetwebdesign/ywXK6/

Answer 2

添加display:inline-block;

<div style="width:100%">
<div style="width:10%;display:inline-block;">  <input type='radio' name="_chkBox" checked="checked" onclick='$("#clientId").val("@client.Id");'/>  </div>
<div style="width:90%;display:inline-block;">  <p style="color:Green;">Success</p>  </div>
</div>

Answer 3

添加Float:left到第一个 div

<div>div 是块元素。如果要制作<div>同一行，请将块元素制作为内联元素display:inline-block或赋予float:left元素

http://jsfiddle.net/Lubuu/8/演示在这里