使用引导程序在一行中包含文本的最佳方法

Question

我遇到了样式问题。将我的文本行放在一行中的最佳方法是什么？问题截图：

我的代码相当简单：

<section id="key-features" class="key-features">
        <div class="container">
            <h2>Key Features</h2>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <ul>
                    <li><img src="images/icons/1.png" alt="Atmospheric pressure test"/>Atmospheric pressure test</li>
                    <li><img src="images/icons/compass.png" alt="Altitude monitor"/>Altitude monitor</li>
                    <li><img src="images/icons/alc.png" alt="Temperature"/>Temperature test</li>
                    <li><img src="images/icons/hr.png" alt="Heart rate"/>Heart rate monitor</li>
                    <li><img src="images/icons/shoe.png" alt="Pedometer"/>Pedometer</li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 pull-left">
                <ul>
                    <li><img src="images/icons/food.png" alt="Calorie"/>Calorie</li>
                    <li><img src="images/icons/location.png" alt="Distance"/>Distance</li>
                    <li><img src="images/icons/sleep.png" alt="Sleep monitor"/>Sleep monitor</li>
                    <li><img src="images/icons/bell.png" alt="Sedentary remind"/>Sedentary remind</li>
                    <li><img src="images/icons/drink.png" alt="Water drink remind"/>Water drink remind</li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 pull-left">
                <ul>
                        <li><img src="images/icons/alarm.png" alt="test"/>Alarm remind</li>
                        <li><img src="images/icons/phone.png" alt="Call remind"/>Call remind</li>
                        <li><img src="images/icons/camera.png" alt="Photograph"/>Photograph</li>
                        <li><img src="images/icons/dna.png" alt="Share moments"/>Share moments</li>
                        <li><img src="images/icons/bt.png" alt="Anti-los"/>Anti-lost</li>
                </ul>
            </div>
        </div>
    </section>

Answer 1

使用 CSS' overflow，你的元素需要有一些固定的边界。由于您正在编写一些纯文本，并且您的浏览器会自动将其换行到新行中，并且您的元素边界已被超出。为了禁用它，您必须先使用它white-space: nowrap;。之后，您可以通过执行overflow: auto;.

由于您需要在所有li元素上使用它，因此您不必手动检查某些东西是否奇怪，您可以这样做：

li {
  overflow: auto;
  white-space: nowrap;
}

您的文本不应再溢出，您现在可以在元素内部滚动以显示丢失的内容。演示