有一个溢出-y 元素的溢出-x

Question

这是一个代码sn-p：

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>