div内容超出后显示横向滚动条怎么设置

要让 div 内容超出后显示横向滚动条，可以使用 CSS 样式中的 overflow-x 属性来实现。将 overflow-x 属性的值设置为 scroll 或 auto，即可在 div 内容超出时自动出现横向滚动条。例如：

div {
  overflow-x: scroll;
}

这样就可以实现当 div 中内容超出时自动生成横向滚动条了。

相关问题

html左右滚动div隐藏部分div,只让DIV出现横向滚动条,窗口不要有滚动条

可以使用CSS中的overflow属性实现这个效果。

首先，在HTML中，我们需要将要滚动的内容放在一个div中，然后再将这个div放在另外一个div中，这个父级div设置宽度，同时设置overflow-x属性为scroll，这样就可以出现横向滚动条了。然后，我们再将父级div的overflow-y属性设置为hidden，这样就可以防止出现纵向滚动条，即使内容超出了父级div的高度也不会出现。

具体的代码如下：

<div class="parent">
  <div class="child">
    <!--这里放要滚动的内容-->
  </div>
</div>

.parent {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.child {
  width: 200%;
  /*这里的宽度可以根据实际情况设置，用来使内容超出父级div的宽度*/
}

这样设置后，就可以实现只出现横向滚动条，而没有纵向滚动条的效果了。

css设置列表元素竖向排列2行横向宽度不定，横向超出则显示滚动条

要实现CSS中列表元素的竖向排列，并且每行显示不定宽度的元素，同时在横向超出容器宽度时显示滚动条，可以使用以下方法：

1. 使用`display: flex`属性来创建一个弹性容器。
2. 设置`flex-wrap: wrap`属性，这样子元素可以在必要时换行。
3. 为整个容器设置一个固定的宽度或宽度为百分比，以适应布局需求。
4. 为了使竖向排列的列表项在一行填满整个容器宽度后显示滚动条，可以在容器上添加`overflow-x: scroll`属性。

以下是一个简单的HTML和CSS示例代码：

HTML:

<div class="flex-container">
  <div class="flex-item">列表项 1</div>
  <div class="flex-item">列表项 2</div>
  <div class="flex-item">列表项 3</div>
  <!-- 更多列表项 -->
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 80%; /* 或者固定宽度 */
  height: 150px; /* 可以根据需要设置高度 */
  overflow-x: scroll; /* 横向超出时显示滚动条 */
}

.flex-item {
  flex: 0 0 auto; /* 不允许元素放大或缩小，保持原始大小 */
  margin: 5px; /* 列表项间的间隔 */
  /* 可以根据需要设置flex-item的其他样式，比如背景色、字体大小等 */
}

这样设置后，所有的`.flex-item`将按照从左到右的顺序排列，当一行无法容纳更多元素时，它们会自动换行。由于设置了`overflow-x: scroll`，当整个容器的宽度超出父容器的宽度时，就会显示横向滚动条。