有一个 overflow-x 的 overflow-y 元素

Question

这是一个代码片段：

div.one {
  width: 98%;
  border: 5px solid black;
  overflow-x: visible;
  overflow-y: hidden;
}
div.two {
  word-wrap: break-word;
  width: 100px;
  height: 100px;
  float: left;
  border: 3px dotted orange;
  overflow-x: hidden;
  overflow-y: visible;
}

<div class='one'>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
</div>

如何让 div.one 有水平滚动条？我希望文本与垂直滚动条完全一样。我希望所有框都在同一行上并且能够滚动浏览它们。

提前致谢。

Answer 1

我从 this post 那里得到了答案。

我加了

white-space: nowrap;
overflow-x: auto;

到div.one

和

display: inline-block; 
white-space: normal;

到div.two，移除float:left;

div.one {
  width: 98%;
  white-space: nowrap;
  border: 5px solid black;
  overflow-x: auto;
  overflow-y: hidden;
}
div.two {
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px dotted orange;
  overflow-x: hidden;
  overflow-y: visible;
}

<div class='one'>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
    <div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div><div class='two'>
    <p>
    Hasdaoidhaidhadauahsduahsduyaudagduygaukdyagduakiysdgasudagdkuaysd
    </p>
    </div>
</div>

有一个 overflow-x 的 overflow-y 元素

Have an overflow-x of overflow-y elements

html

css

overflow