溢出x属性的奇怪行为

任何人都可以解释我在这里发生了什么。我指定overflow-x应该是可见的，我得到水平滚动条。这是为什么发生？我错过了什么，或者我应该睡一会儿？溢出x属性的奇怪行为

HTML

<div id="container"> 
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis est esse provident assumenda consequatur vel atque minima id veritatis! Totam iure omnis laudantium provident dolorum blanditiis modi voluptatibus nihil.</p> 
<p id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore debitis blanditiis iure aperiam quam vero esse perferendis doloremque eos natus nemo quos mollitia ratione qui laboriosam itaque animi tempora.</p> 
</div>

CSS

/* DIFFERENCE BETWEEN WIDTH:AUTO & WIDTH:100% */ 
* {margin: 0;padding: 0;} 
#container { 
    overflow-y: hidden; 
    overflow-x: visible; 
    width: 500px; 
    margin: auto; 
    background-color: whitesmoke; 
} 
#one { 
    width: auto; 
    padding:10px; 
    margin: 20px; 
    border:10px solid gray; 
} 
#two { 
    width: 100%; 
    padding:10px; 
    margin: 20px; 
    border:10px solid gray; 
}

来源

2014-10-03 user3448600

你有什么期望输出..？ – Sachin 2014-10-03 13:05:25

预期的输出应该是溢出的：在x轴上可见，但我得到滚动条，这不是我想要的。 – user3448600 2014-10-03 13:10:17

所以你指定始终显示为x轴滚动条。只有在需要时才使用overflow-x: auto显示滚动条。

来源

2014-10-03 13:04:48 Justinas

不，我不想滚动条，我需要我的parapgraph溢出我的容器，并且不应该在x轴上有任何滚动条，因为我声明了overflow-x：可见。 – user3448600 2014-10-03 13:12:25

这不是overflow-x所做的。 overflow-x用于滚动条 – Steve 2014-10-03 13:13:06

我认为你在'overflow-x：visible'和'overflow-x：scroll'混淆了'overflow-x：visible'，Steve。 – 2014-10-03 13:22:20

尝试此操作，将第二个'p'标记的宽度更改为auto并更改overflow-x：auto。

#container { 
    overflow-y: hidden; 
    overflow-x: auto; 
    width: 500px; 
    margin: auto; 
    background-color: green; 
} 
#one { 
    width: auto; 
    padding:10px; 
    margin: 20px; 
    border:10px solid gray; 
} 
#two { 

    width: auto; 
    padding:10px; 
    margin: 20px; 
    border:10px solid gray; 
}

在这里看看：http://jsfiddle.net/6j5057my/1/

来源

2014-10-03 13:14:47 Zanoldor

溢出x属性的奇怪行为

回答

相关问题