같은 줄에 표시 할 라디오 버튼 및 레이블

같은 줄에 표시 할 라디오 버튼 및 레이블

---

내 레이블과 라디오 단추가 같은 줄에 유지되지 않는 이유는 무엇입니까?

내 양식은 다음과 같습니다.

<form name="submit" id="submit" action="#" method="post">
            <?php echo form_hidden('what', 'item-'.$identifier);?>

            <label for="one">First Item</label>
            <input type="radio" id="one" name="first_item" value="1" />

            <label for="two">Second Item</label>
            <input type="radio" id="two" name="first_item" value="2" />             <input class="submit_form" name="submit" type="submit" value="Choose" tabindex="4" />
            </form>

---

이 질문에서 내가 배치 한 HTML 구조를 사용하는 경우 레이블과 입력을 왼쪽으로 플로팅하고 항목이 정렬 될 때까지 패딩 / 여백을 조정할 수 있습니다.

그리고 예, 라디오 버튼에 이전 IE의 클래스 이름을 지정하고 싶을 것입니다. 그리고 위에서 링크 한 마크 업에 따라 모두 같은 줄에 두려면 다음과 같습니다.

<fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>
</fieldset>

시작 CSS는 다음과 같습니다.

fieldset {
  overflow: hidden
}

.some-class {
  float: left;
  clear: none;
}

label {
  float: left;
  clear: none;
  display: block;
  padding: 2px 1em 0 0;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}

---

내가 항상 한 것은 라벨 안에 라디오 버튼을 감싸는 것입니다.

<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>

그런 것이 항상 나를 위해 일했습니다.

---

css 어딘가에 입력 태그에 너비를 지정할 수 있습니다 .

추가 class="radio"라디오 상자에과를 input.radio {width: auto;}당신의 CSS에.

---

둘 다 display:inline.

---

흠. 기본적으로 <label>is display: inline;및 <input>is (대략, 적어도) display: inline-block;이므로 둘 다 같은 줄에 있어야합니다. http://jsfiddle.net/BJU4f/ 참조

아마도 스타일이 설정되어 label나 input에게 display: block?

---

I'm assuming the problem is that they are wrapping onto separate lines when the window is too narrow. As others have pointed out, by default the label and input should be "display:inline;", so unless you have other style rules that are changing this, they should render on the same line if there is room.

Without changing the markup, there will be no way to fix this using only CSS.

The simplest way to fix it would be to wrap the radio button and label in a block element, such as a p or a div, and then prevent that from wrapping by using white-space:nowrap. For example:

<div style="white-space:nowrap;">
  <label for="one">First Item</label>
  <input type="radio" id="one" name="first_item" value="1" />
</div>

---

I use this code and works just fine:

input[type="checkbox"], 
input[type="radio"],
input.radio,
input.checkbox {
    vertical-align:text-top;
    width:13px;
    height:13px;
    padding:0;
    margin:0;
    position:relative;
    overflow:hidden;
    top:2px;
}

You may want to readjust top value (depends on your line-height). If you don't want IE6 compatibility, you just need to put this code into your page. Otherwise, you will must add extra class to your inputs (you can use jQuery - or any other library - for that tho ;) )

---

I always avoid using float:left but instead I use display: inline

.wrapper-class input[type="radio"] {
  width: 15px;
}

.wrapper-class label {
  display: inline;
  margin-left: 5px;
  }

<div class="wrapper-class">
  <input type="radio" id="radio1">
  <label for="radio1">Test Radio</label>
</div>

---

I wasn't able to reproduce your problem in Google Chrome 4.0, IE8, or Firefox 3.5 using that code. The label and radio button stayed on the same line.

Try putting them both inside a <p> tag, or set the radio button to be inline like The Elite Gentleman suggested.

---

My answer from a different post on the same subject should help you zend form for multicheckbox remove input from labels

---

Note: Traditionally the use of the label tag is for menus. eg:

<menu>
<label>Option 1</label>
<input type="radio" id="opt1">

<label>Option 2</label>
<input type="radio" id="opt2">

<label>Option 3</label>
<input type="radio" id="opt3">  
</menu>

---

I was having the similar issue of keeping all radio buttons on the same line. After trying all the things I could, nothing worked for me except the following. What I mean is simply using table resolved the issue allowing radio buttons to appear in the same line.

<table>
<tr>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byName", new { @checked = "checked", @class = "radio" }) By Name
        </label>
    </td>
    <td>
        <label>
            @Html.RadioButton("p_sortForPatch", "byDate", new { @class = "radio" }) By Date
        </label>
    </td>
</tr>
</table>

---

If the problem is that the label and input are wrapping to two lines when the window is too narrow, remove the whitespace between them; e.g.:

<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />

If you need space between the elements, use non-breaking spaces (& nbsp;) or CSS.

참고URL : https://stackoverflow.com/questions/2306117/radio-buttons-and-label-to-display-in-same-line