html - 有一个 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 得到了答案发布。

我加了

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>