我的页面上有一个DIV元素，整个内容是由异步AJAX调用生成的。内容由P元素（段落）构建而成，P元素也包含A元素（href链接），仅此而已。实际上，我的小型网页没有任何内容，但是提到的DIV的id参数是“ log”。
我的DIV和P元素的CSS代码是：
<style>
p { line-height:20%;
font-size:9px;
font-family:monospace
}
a {text-decoration:none}
a[title]:hover:after {font-size:9px;font-family:monospace}
div#log {
width: 1000px;
overflow-x: scroll;
}
</style>
我在页面上根本没有其他内联或其他样式元素。
AJAX返回的动态内容如下所示：
<p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212 </a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands" target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
出现水平滚动条，但看起来像已禁用，没有滑块。当内容的宽度大于1000像素时，或者我将宽度设置为较小时，比如说500 px，滑块仍然不出现，而是段落的内容从右侧向左侧弯曲，并且溢出的字母覆盖了开头下一行/段落的内容。
如何使滚动条正常工作？
由于您说您的页面仅包含该#logdiv，因此我将给出一个涉及稍微更改内容的答案，并附上以下说明：
p {
/* Added */
white-space: nowrap;
/**/
line-height:20%;
font-size: 9px;
font-family: monospace
}
a {
text-decoration: none
}
a[title]:hover:after {
font-size: 9px;
font-family: monospace
}
div#log {
/* width: 1000px; */
overflow-x: scroll;
}<div id="log">
<p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212 </a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands"
target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
<p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212 </a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands"
target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
<p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212 </a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands"
target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>
</div>如果保持打开width状态#log，则仅当p标签的宽度大于1000px时才会显示滚动条。所以，我摆脱了它。然后，我添加white-space: nowrap到p，因为您似乎希望将每条记录都放在一行上。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句