html - 如果空间不够，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 空间中，我也希望它 float 到左侧并换行并继续文本。如何做到这一点？

Answer 1

float:left 导致了这种情况的发生。您甚至不需要它，因为您正在为 margin:right 设置一个固定值。只需将其完全删除即可。

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

Demo