Перемикачі та мітка відображатимуться в одному рядку

Чому мої ярлики та перемикачі не залишаються в одному рядку, що я можу зробити?

Ось моя форма:

<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 {
      overflow: hidden
    }
    
    .some-class {
      float: left;
      clear: none;
    }
    
    label {
      float: left;
      clear: none;
      display: block;
      padding: 0px 1em 0px 8px;
    }
    
    input[type=radio],
    input.radio {
      float: left;
      clear: none;
      margin: 2px 0 0 2px;
    }

<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>

Що я завжди робив, це просто загорнути перемикач всередину ярлика ...

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

Щось подібне завжди працювало на мене.

у вас може бути вказана ширина для вхідних тегів десь у вашому css .

додати a class="radio"до вашого радіоприймача і a input.radio {width: auto;}до вашого css.

Покладіть їх обох display:inline.

Хм За замовчуванням, <label>є display: inline;і <input>є (приблизно, принаймні) display: inline-block;, тому вони обоє повинні знаходитися на одному рядку. Див. Http://jsfiddle.net/BJU4f/

Можливо, таблиця стилів установки labelабо inputв display: block?

Я припускаю, що проблема полягає в тому, що вони переносяться на окремі рядки, коли вікно занадто вузьке. Як зазначали інші, за замовчуванням мітка та введення мають бути "display: inline;", тому, якщо у вас немає інших правил стилю, які змінюють це, вони повинні відображатись в одному рядку, якщо є місце.

Без зміни розмітки неможливо буде це виправити, використовуючи лише CSS.

Найпростіший спосіб виправити це - обернути перемикач та мітку елементом блоку, таким як a pабо a div, а потім запобігти його обтіканню за допомогою white-space:nowrap. Наприклад:

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

Я завжди уникаю використання, float:leftале натомість використовую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>

Я використовую цей код і чудово працює:

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;
}

Можливо, ви захочете відкоригувати найвище значення (залежить від вашого line-height). Якщо ви не хочете сумісність з IE6, вам просто потрібно розмістити цей код на своїй сторінці. В іншому випадку вам доведеться додати додатковий клас до введених даних (для цього можете використовувати jQuery - або будь-яку іншу бібліотеку;))

** Використана таблиця для вирівнювання радіо та тексту в один рядок

<div >
  <table>
    <tbody>
      <tr>
        <td><strong>Do you want to add new server ?</strong></td>
        <td><input type="radio" name="addServer" id="serverYes" value="1"></td>
        <td>Yes</td>
        <td><input type="radio" name="addServer" id="serverNo" value="1"></td>
        <td>No</td>

      </tr>
    </tbody>
  </table>
</div>

**

Я не зміг відтворити вашу проблему в Google Chrome 4.0, IE8 або Firefox 3.5 за допомогою цього коду. Етикетка та перемикач залишились на одному рядку.

Спробуйте помістити їх обох всередину <p>тегу, або встановіть перемикач таким, щоб він був вбудованим, як запропонував Елітний Джентльмен.

Моя відповідь з іншого допису на ту саму тему повинна допомогти вам у формі Zend for multicheckbox видалити введення з міток

Примітка: Традиційно використання тегу ярлика використовується для меню. наприклад:

<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>

У мене була подібна проблема з утриманням усіх перемикачів на одному рядку. Спробувавши все, що міг, у мене нічого не вийшло, крім наступного. Я маю на увазі те, що просто використання таблиці вирішило проблему, що дозволяє перемикачам відображатися в одному рядку.

<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>

Якщо проблема полягає в тому, що мітка та введення переносяться у два рядки, коли вікно занадто вузьке, видаліть пробіли між ними; наприклад:

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

Якщо вам потрібен простір між елементами, використовуйте нерозривні пробіли ( & nbsp;) або CSS.

fieldset {
  overflow: hidden
}

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

label {
  float: left;
  clear: both;
  display:initial;
}

input[type=radio],input.radio {
  float: left;
  clear: both;     
}