Вопросы Теги

Как я могу сделать мультилинию, вертикально и горизонтально выровненные маркировки для переключателей в HTML-формах с CSS?

Visual Studio ожидает, что пространства имен будут соответствовать расположению папок.
Чтобы решить вашу проблему, выйдите из Visual Studio и переименуйте папку вашего проекта в MyProject. Затем запустите Visual Studio, удалите проект из решения, снова добавьте его как «существующий проект» и соберите проект, F6 или ctrl + shift + B

Если вы переименуете свое пространство имен после создания проекта, вы получите ошибки такого рода.

11
задан Spooky 19 June 2015 в 21:00
поделиться

4 ответа

Используя следующую разметку и CSS, я смог создать многострочные метки, которые не переносятся под переключатель: 

<style type="text/css">
    fieldset input, label {
      float: left;
      display: block;
    }

    fieldset li {
      clear: both;
    }
</style>

<fieldset>
  <ol>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
    <li>
      <input type="radio" id="x" />
      <label for="x">
        stuff<br/>
        stuff1
      </label>
    </li>
  </ol>
</fieldset>

, однако я не смог использовать: 

fieldset label {
  vertical-align: middle;
}

для центрирования метки по вертикали на переключателе, даже при применении ширина (оба предложения в ответе Дмитрия Фаркова.

4
ответ дан 3 December 2019 в 06:47
поделиться

Я считаю, что это все. Однако вы не упомянули, что он должен проходить проверку, поэтому я использовал отображение встроенного блока (-moz-inline-box). На самом деле, один из моих любимых.

Вот ' рабочая копия sa

Протестировано в Safari 3, FireFox 3 и IE7. 

    <style type="text/css">
ol{
    padding-left: 0;
    margin-left:0;
}

ol>li {
    list-style-type: none;
    margin-bottom: .5em;
}

ol>li input[type=radio] {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}

ol>li label {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}
</style>
11
ответ дан 3 December 2019 в 06:47
поделиться

Сделать ввод и метку одновременно 

float: left;
display: block;

Установить ширину для метки и ввода.

применить 

clear: both;
 vertical-align: middle;

ко всем ли.

1
ответ дан 3 December 2019 в 06:47
поделиться

Поскольку я спросил, как обрабатывать очень длинные ярлыки выше, и я наконец решил это сам. Вот решение моей проблемы. Может быть, это поможет? 

<style type="text/css">
  #master_frame { 
      background: #BBB;
      height: 300px;
      width: 300px;
  } 
  fieldset.radios { 
      border: none;
  } 
  fieldset fields { 
      clear: both;
  } 
  input { 
      float: left;
      display: block;
  } 
  label { 
      position: relative;
      margin-left: 30px;
      display: block;
  } 
</style>

<div id="master_frame">
  <fieldset class='radios'>
    <div class='field'>
      <input type="radio" id="a" />
      <label for="a">Short</label>
    </div>
    <div class='field'>
      <input type="radio" id="b" />
      <label for="b">
        A really long and massive text that does not fit on one row!
      </label>
    </div>
  </fieldset>
</div>
2
ответ дан 3 December 2019 в 06:47
поделиться