Переключатели и метка для отображения в одной строке
Я не знаю, работает ли мой код для других, но для меня это действительно отличная работа. Я получил эту идею, проанализировав код Долана Антенуччи, потому что его версия не работает для меня, и я действительно надеюсь, что это будет полезно кому-то.
var tranStatus = false;
$(window).resizeend(200, function(){
$(".cat-name, .category").removeAttr("style");
//clearTimeout(homeResize);
$("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
tranStatus = true;
});
processResize();
});
function processResize(){
homeResize = setInterval(function(){
if(tranStatus===false){
console.log("not yet");
$("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
tranStatus = true;
});
}else{
text_height();
clearInterval(homeResize);
}
},200);
}
10 ответов
Если вы используете структуру HTML, которую я изложил в этом вопросе , вы можете просто переместить метку и ввод слева и настроить заполнение / margin, пока все не выровняется.
И да, вы захотите, чтобы ваш переключатель имел имя класса для старого 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;
}
** Таблица Used для выравнивания радио и текста в одной строке
<div style="left: 0px !important;width:100%">
<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>**
Хмм. По умолчанию равно display: inline; и is (примерно, по крайней мере) display: inline-block; , поэтому они оба должны быть на одной линии. См. http://jsfiddle.net/BJU4f/
Возможно, таблица стилей устанавливает метку или input на display: block ?
Я использую этот код и отлично работает:
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 - или любую другую библиотеку - для этого;))
Я не смог воспроизвести вашу проблему в Google Chrome 4.0, IE8 или Firefox 3.5, используя этот код. Ярлык и радиокнопка оставались на одной строке.
Попробуйте поместить их оба в тег или установить радиокнопку в строку, как предложил Элит Джентльмен.
у вас может быть ширина , указанная для вашего введите теги где-нибудь в вашем css .
добавьте class = "radio" в свои радиобоксы и input.radio {width: auto;} в ваш CSS.
Если проблема в том, что метка и ввод переносятся на две строки, когда окно слишком узкое, удалите пробелы между ними; например: [
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
] Если вам нужен промежуток между элементами, используйте неразрывные пробелы ( & nbsp; ) или CSS.
Что я всегда делал, так это просто помещал переключатель в ярлык ...
<label for="one">
<input type="radio" id="one" name="first_item" value="1" />
First Item
</label>
Что-то в этом роде всегда помогало мне.
Я предполагаю, что проблема в том, что они переносятся на отдельные строки, когда окно слишком узкое. Как указывали другие, по умолчанию метка и ввод должны быть «display: inline;», поэтому, если у вас нет других правил стиля, которые меняют это, они должны отображаться в той же строке, если есть место.
Без изменения разметки это невозможно исправить, используя только CSS.
Самый простой способ исправить это - поместить радиокнопку и метку в элемент блока, например p или div , а затем предотвратить его перенос с помощью используя пробел: nowrap . Например:
<div style="white-space:nowrap;">
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
</div>