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

Question

以下是代码段：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何让div.one有一个水平滚动条？我希望文本与垂直滚动条完全一致。我希望所有的盒子都在同一条线上，并能够滚动它们。

提前致谢。

Answer 1

我从this帖子得到了答案。

我添加了

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

到div.one

和

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

到div.two，删除float:left;

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;