Вот мой html-код:
<div class="col-md-3">
<ul id="id_taxonomy_terms">
<li>
<label for="id_taxonomy_terms_0">
<input id="id_taxonomy_terms_0" type="radio" value="1" name="taxonomy_terms">
test1
</label>
</li>
<li>
<label for="id_taxonomy_terms_1">
<input id="id_taxonomy_terms_1" type="radio" value="2" name="taxonomy_terms">
test2test2test2
</label>
</li>
<li>
<label for="id_taxonomy_terms_2">
<input id="id_taxonomy_terms_2" type="radio" value="3" name="taxonomy_terms">
test3test3
</label>
</li>
<li>
<label for="id_taxonomy_terms_3">
<input id="id_taxonomy_terms_3" type="radio" value="4" name="taxonomy_terms">
Substance HolonymsSubstance HolonymsSubstance Holonyms
</label>
</li>
</ul>
</div>
Здесь снимок экрана:
Здесь css я добавил:
#id_taxonomy_terms li{
list-style-type: none;
float: left;
margin-right: 25px;
}
Даже если список не может размещаться в данном поле div, я хочу, чтобы он плавал влево, а строка прерывалась и продолжалась с текстом. Как это сделать?
float:left
вызывает это. Вы даже не нуждаетесь в этом, потому что вы устанавливаете фиксированное значение в margin:right
. Просто удалите его целиком.
#id_taxonomy_terms li{
list-style-type: none;
margin-right: 25px;
}
float: left
не работает, если я сделаю это
float: left
С вашей текущей разметкой #id_taxonomy_terms
что #id_taxonomy_terms
имеет width: 200px
#id_taxonomy_terms
, чтобы правильно выравнивать labels
справа от inputs
:
Способ №1
#id_taxonomy_terms {
width: 200px;
}
#id_taxonomy_terms li{
list-style-type: none;
display: block;
margin-right: 25px;
}
#id_taxonomy_terms input {
margin-left: -16px;
}
Демо: http://jsfiddle.net/YP7bC/
Способ № 2:
Требуется, чтобы вы немного изменили свою разметку, но css использует floats
вместо negative margin
#id_taxonomy_terms {
width: 200px;
}
#id_taxonomy_terms li {
list-style-type: none;
display: block;
margin-right: 25px;
clear: both;
}
#id_taxonomy_terms input {
float: left;
}
#id_taxonomy_terms label {
float: left;
width: 86%;
}
#id_taxonomy_terms
фиксированную ширину?<div class="col-md-3">
. Я используюbootstrap3