时间戳

首页 > 解决方案 > 如何在行的中心显示所有值，并且行上方的 div 的宽度与其下方的行不同。如何做到这一点？

html - 如何在行的中心显示所有值，并且行上方的 div 的宽度与其下方的行不同。如何做到这一点？

问题描述

 <!DOCTYPE html>
        <html lang="en">

        <head>
          <meta charset="UTF-8">
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <style type="text/css">
         ul {
          list-style-type: none;
          margin: 0;
          padding: 0
         }
         li{
            height: 64px;
            background-color:pink;
         }
         .a{
            height: 64px;   
         }
         .ab{
                display: flex;
                direction: row;
            align-items: center;
         }
         }
         .b{
            display: flex;
            direction: row-reverse;
            align-items: center;
         }
         .secondli{
            margin-top: 20px;
         }
        </style>
          <title>Document</title>
        </head>

        <body>
          <div class="container" >
            <div class="row">
              <div class="col-md-6 col-6" >
               <p>mwiiwiw</p>

              <ul>
                <li>
                    <div style="width: 100%">
                        <span>Xyz</span>
                        <span>sjfoeij</span>
                    </div>
                <div class="row a">

               <div class="col-12 col-md-8  ab" style="background-color: aqua;">
                <span class="b">ABC</span>
            </div>
                <div class="col-12 col-md-4 b"style="background-color: yellow;" >
                <span>11</span>
            </div>
        </div>
        </li>
         <li class="secondli">
                <div class="row a">
               <div class="col-12 col-md-8  ab" >
                <span class="b">ABC</span>
            </div>
                <div class="col-12 col-md-4 b" >
                <span>11</span>
            </div>
        </div>
        </li>
        </ul>
        </body>

        </html>

如何在行的中心显示所有值？跨度值为 Xyz 的 div 的宽度与其下方的行不同。而且第二行的宽度与上面的行不同？如何使用引导程序和 Css 来实现这一点。我们可以在 li 中添加两个 li 和一行，否则我们必须在里面添加容器

标签： htmlcssbootstrap-4

解决方案

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
 div{
   height: 80px;
   text-align: center;
   padding-top: 30px;
 }
</style>
  <title>Document</title>
</head>

<body>
  <div class="container" >
    <div class="row">
      <div class="col-sm-6" >
       <p>mwiiwiw</p>

       <div class="row">
        <div class="col-sm-8" style="background-color: aqua;">
          <span class="b">XYZ</span>
        </div>
        <div class="col-sm-4 b"style="background-color: yellow;" >
          <span>Sjfoeij</span>
      </div>
      </div>
    <div class="row">
      <div class="col-sm-8" style="background-color: blue;">
        <span class="b">ABC</span>
      </div>
      <div class="col-sm-4 b"style="background-color: red;" >
        <span>11</span>
    </div>
    </div>
    <div class="row">
       <div class="col-sm-8" style="background-color: aqua;" >
        <span class="b">ABC</span>
      </div>
        <div class="col-sm-4" style="background-color: yellow;" >
        <span>11</span>
    </div>
</div>
</body>

</html>

推荐阅读