css 使div显示为水平

ddrv8njm 于 2023-02-20 发布在其他

关注(0)|答案(2)|浏览(170)

怎样才能使这个显示器像水平现在是垂直的，从左到右而不是从上到下。
我尝试了display：flex，但只有文本外的类得到display：flex，没有外部的div。

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

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

css

来源：https://stackoverflow.com/questions/75479993/make-div-display-as-horizontal

2条答案

按热度按时间

zsohkypk1#

有多种方法可以实现这一点，但当前示例中最简单的方法是用一个div（宽度= 100%） Package 现有代码，并显示：弯曲

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

<div style="width: 100%; display: flex;">
<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>

赞(0）回复(0）举报 2023-02-20

t9eec4r02#

display: flex用于父节点，控制其子节点的显示，flex-direction: column使子节点显示在cloumn中。

赞(0）回复(0）举报 2023-02-20