text-align实现两端对齐，justify

最新推荐文章于 2024-10-26 18:16:45 发布

淡蓝色小怪兽

最新推荐文章于 2024-10-26 18:16:45 发布

阅读量4.3k

点赞数

分类专栏： JS，Html 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_38614249/article/details/82588406

版权

JS，Html 专栏收录该内容

7 篇文章

订阅专栏

html部分：

 <div class="carousel_second">
              <div class="carousel_info">
                  <div class="item">
                      <ul>
                          <li>
                              <div class="info_pic">
                                  <img src="./img/lvyou.jpg" alt="">
                                  <span class="info_bgc">
                                      <div class="bgc_month">Aug</div>
                                      <div class="bgc_date">17</div>
                                  </span>
                              </div>
                              <div class="carousel_title">师傅去玩</div>
                              <div class="carousel_content">康师傅去玩ID目前排名的前五名判断，去带我去
                                  傅去玩ID目前排名的前五名判断，去带我去的武器的武器
                                  傅去玩ID目前排名的前五名判断，去带我去的武器的武器
                                  傅去玩ID目前排名的前五名判断，去带我去的武器的武器
                                  傅去玩ID目前排名的前五名判断，去带我去的武器的武器的武器的武器的期望的发发
                              </div>
                          </li>
                          <li>
                              <div class="info_pic">
                                  <img src="./img/lvyou.jpg" alt="">
                                  <span class="info_bgc">
                                      <div class="bgc_month">Aug</div>
                                      <div class="bgc_date">17</div>
                                  </span>
                              </div>
                              <div class="carousel_title">11111</div>
                              <div class="carousel_content">康师傅</div>
                          </li>
                          <li>
                              <div class="info_pic">
                                  <img src="./img/lvyou.jpg" alt="">
                                  <span class="info_bgc">
                                      <div class="bgc_month">Aug</div>
                                      <div class="bgc_date">17</div>
                                  </span>
                              </div>
                              <div class="carousel_title">11111</div>
                              <div class="carousel_content">康师傅</div>
                          </li>
                          <li>
                              <div class="info_pic">
                                  <img src="./img/lvyou.jpg" alt="">
                                  <span class="info_bgc">
                                      <div class="bgc_month">Aug</div>
                                      <div class="bgc_date">17</div>
                                  </span>
                              </div>
                              <div class="carousel_title">11111</div>
                              <div class="carousel_content">康师傅</div>
                          </li>
                          <li>
                              <div class="info_pic">
                                  <img src="./img/lvyou.jpg" alt="">
                                  <span class="info_bgc">
                                      <div class="bgc_month">Aug</div>
                                      <div class="bgc_date">17</div>
                                  </span>
                              </div>
                              <div class="carousel_title">11111</div>
                              <div class="carousel_content">康师傅</div>
                          </li>
                          <li>
                              <div class="info_pic">
                                  <img src="./img/lvyou.jpg" alt="">
                                  <span class="info_bgc">
                                      <div class="bgc_month">Aug</div>
                                      <div class="bgc_date">17</div>
                                  </span>
                              </div>
                              <div class="carousel_title">11111</div>
                              <div class="carousel_content">康师傅</div>
                          </li>
                      </ul>
                  </div>
                  <div class="more">
                      Read More >
                  </div>
              </div>

css:

.carousel_second ul{
    margin-top: 0.28rem;
    /*margin-bottom: 1.57rem;*/
    text-align: justify;
    font-size: 0;
}

.carousel_second ul:after{
    width: 100%;
    height: 0;
    margin: 0;
    display: inline-block;
    overflow: hidden;
    content: '';
}

设置伪类，来达到多行。一行，均能两端对齐的效果。