如果空间不够，li文本会自动到达中心

Question

这是我的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空间中，我希望它向左浮动并且换行符继续文本。怎么做？

Answer 1

float:left导致这种情况发生。您甚至不需要它，因为您将固定值设置为margin:right。完全删除它。

#id_taxonomy_terms li{
    list-style-type: none;
    margin-right: 25px;
}

Demo

Answer 2

使用您当前的标记，我们假设#id_taxonomy_terms有width: 200px，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%;
}

演示：http://jsfiddle.net/xLWDs/