Question

我尝试在输入单选按钮后放置文本，但文本始终位于单选按钮下。我使用了显示的CSS，但得到了相同的结果。

CSS：

<style>  

.sp-list .sp-item {
  list-style:none;
  margin:0;
  padding:0;
}

.sp-item {
  clear:both;
  display:block;
  margin:1em 0;
}

.sp-input-radio {
  float:left;
  margin:0.5em 1em 0 0;
}

.sp-label {
  display:inline-block;
  width:200px;
  white-space:nowrap;
}

</style>

HTML：

<fieldset>
<ul class="sp-list">
<li class="sp-item">
<input name="answer" value="1" id="poll-1-1" class="sp-input-radio" type="radio">
<label for="poll-1-1" class="sp-label"> Ok very nice </label>
</li>
</fieldset>

我尝试了这个，但无法在同一行输入广播后显示文字。

Answer 1

尝试删除输入中的float:left;，它会按照您的意愿排列 - jsFiddle here 。

只需改变：

.sp-input-radio {
  float:left;
  margin:0.5em 1em 0 0;
}

为：

.sp-input-radio {
  margin:0.5em 1em 0 0;
}

如果有必要，你也可以在该课程中取出保证金（除非你原来想要它的间距）。

Answer 2

我为您的解决方案创建了一个小提琴，发现您的单选按钮具有以下css属性

margin:0.5em 1em 0 0;

哪个小鼠会引起问题，我删除了：

演示：http://jsfiddle.net/u7n4h/希望有所帮助

输入文本旁边的单选按钮

2 个答案: