Question

类为 main 的 div 应该只占 30% 在我页面的左侧，但它采用全宽。我试图指定宽度但它不起作用。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
      <div class="main">
          <div class="col-md-4">
              <div class="content-section">
                <h3>Latest Covid Info</h3>
                <p class='text-muted'>You can put any information here you'd like.
                  <ul class="list-group">
                    <div>
                      <li class="list-group-item list-group-item-light">Total Cases</li>
                      <li class="list-group-item list-group-item-light">Total Deaths</li>
                    </div>
                    <hr>
                    <div>
                      <li class="list-group-item list-group-item-light">Total Population</li>
                      <li class="list-group-item list-group-item-light">Vaccinated People Count</li>
                    </div>
                    <hr>
                    <div>
                      <li class="list-group-item list-group-item-light">Announcements</li>
                      <li class="list-group-item list-group-item-light">Calendars</li>
                      <li class="list-group-item list-group-item-light">etc</li>
                    </div>
                  </ul>
                </p>
              </div>
            </div>
          </div>
      </div>
    
    </body>
    </html>

Answer 1

使用 CSS 指定 div 宽度：

.main {
  width: 30%;
}

.main {
  width: 30%;
}

      <div class="main">
          <div class="col-md-4">
              <div class="content-section">
                <h3>Latest Covid Info</h3>
                <p class='text-muted'>You can put any information here you'd like.</p>
                  <ul class="list-group">
                    <div>
                      <li class="list-group-item list-group-item-light">Total Cases</li>
                      <li class="list-group-item list-group-item-light">Total Deaths</li>
                    </div>
                    <hr>
                    <div>
                      <li class="list-group-item list-group-item-light">Total Population</li>
                      <li class="list-group-item list-group-item-light">Vaccinated People Count</li>
                    </div>
                    <hr>
                    <div>
                      <li class="list-group-item list-group-item-light">Announcements</li>
                      <li class="list-group-item list-group-item-light">Calendars</li>
                      <li class="list-group-item list-group-item-light">etc</li>
                    </div>
                  </ul>
              </div>
            </div>
          </div>

如何限制 DIV 的宽度

1 个答案: