Question

我有一个页面显示包含图片的图书的文字。我有一个问题，在某些情况下显示水平滚动条。 CSS如下：

#textDisplay
{
    width: 704px;
    height: 750px; 
    margin: 0 0 20px 20px;
    overflow-y: auto;
    overflow-x; auto;
}

.picture 
{ 
    font: 13px Arial, sans-serif;
    font-style: italic; 
    text-align: center;
    border: 0;
}

.picture img 
{ 
    border: 1px solid #CCCCCC; 
    vertical-align: middle; 
    margin-bottom: 5px; 
} 

.left 
{
     margin: 0 20px 10px 20px; 
     float: left; 
}

#textDisplay用于围绕整个文本的div。图片的定义如下：

<div class="picture left">
    <img src="../../../../Content/Images/BookPhotos/Men Bowlers 1953.jpg" alt="Men Bowlers 1953 - drawings by Cyril Thompson" />
    <br />Men Bowlers 1953 – drawings by Cyril Thompson
</div>

如果我使用段落标记p跟随它，则会显示水平滚动条。但是，如果我在h4标签之前或之后，则不会显示滚动条。

他们的定义是：

p
{
    font-size: 10pt;
    font-family: Verdana;
    margin: 15pt 20px 15pt 20px;
}

h4
{
    text-align: left;
    font-size: 10pt;
    font-weight: bold;
    font-family: Arial, Verdana, Sans-Serif;
}

任何人都有任何想法，为什么会这样，以及我如何解决它？

在Firefox和Chrome中都不会发生这种情况！

Answer 1

使用此：

overflow-y: auto;
overflow-x: hidden;

看看：

Answer 2

是的，thirtydot，对我也有用。

我的身体标签下方有一个包装div，它有水平溢出，造成不需要的滚动条。

overflow-y: auto;
overflow-x: hidden;

这就是诀窍。感谢您发帖。

Answer 3

只需在body标签之后编写整个html代码，例如：

<body>
<div class="container-fluid">
//all the html code
</div>
</body>

将div类“容器-流体”中的所有内容包装起来，简单易行！

一直为我工作！

.NET MVC 3 - 不需要的水平滚动条

3 个答案: