在文字旁邊輸入單選按鈕

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在這里 。

只是改變：

.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/希望對您有所幫助