为什么我的Divs自动调整位置？

Question

使用JQuery，
我有一组四个标签，这样开头：

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">Item One</label>
        <div id="tab-content1" class="tab-content">
            <p>Text Here </p>
        </div>
    </li>
</ul>

在桌面上，它看起来符合要求。但是在移动设备上，当屏幕缩小时，其他标签会崩溃（它们应该是这样），但div内的文本不会自动调低。这使得其他选项卡留在可见文本后面。

有什么方法可以解决这个问题吗？

谢谢，

有关完整代码，请参阅此JSFiddle页面： https://jsfiddle.net/hesbwgsm/2/

Answer 1

{p> .tabs li 在你的css中，.tabs width: 75%但li在ul内部，你没有给它任何宽度

  

用你的替换

.tabs li {
  float: left;
  display: block;
  width: 25%;
}