如何让外层Div横向排列？当前为纵向，display:flex未作用于外层Div

要让这些紫色边框的元素从左到右横向排列，核心是给它们的父容器添加display: flex属性——你之前只给extra-text加了flex，但真正需要控制横向布局的是包裹这些紫色div的外层容器。

具体操作步骤：

• 给所有紫色边框的div套一个父容器（比如添加class为container的div）
• 给这个父容器设置flex样式，同时可以用gap控制元素间距，overflow-x: auto避免小屏幕下内容溢出

修改后的完整代码 #

CSS 代码

/* 新增父容器的横向布局样式 */
.container {
  display: flex;
  gap: 16px; /* 元素间的间距，可按需调整 */
  overflow-x: auto; /* 屏幕过小时允许横向滚动 */
  padding: 10px 0;
}

.main-text:hover + .extra-text{
  display: block;
}
.extra-text{
  background-color: #FFFFFF;
  margin-top: 10px;
  width: 70%;
  border: 2px solid #000000;
  padding: 12px;
  font-size: 10px;
  display: none;
}

HTML 代码

<div class="container">
  <div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
    <div class="main-text">Abcd,</div>
    <div class="extra-text"> test 1 test 2 test 3</div>
  </div>
  <div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
    <div class="main-text">Abcd,</div>
    <div class="extra-text"> test 1 test 2 test 3</div>
  </div>
  <div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
    <div class="main-text">Abcd,</div>
    <div class="extra-text"> test 1 test 2 test 3</div>
  </div>
  <div style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
    <div class="main-text">Abcd,</div>
    <div class="extra-text"> test 1 test 2 test 3</div>
  </div>
</div>

可选优化：如果希望hover显示的extra-text和main-text在同一行，可把.extra-text的display: block改成display: inline-block，并将margin-top替换为margin-left。

内容的提问来源于stack exchange，提问作者Meow