为什么我的按钮宽度为整个屏幕？

Question

我刚刚开始学习引导程序，想知道我的图像按钮发生了什么。它占据了整个屏幕的宽度，我不知道为什么？我可以减少它，是的，但我想知道为什么会这样？通常按钮默认都很小。另外，如果您发现我的代码有问题或写得不好，如果您能指出来，我将不胜感激。  #grid div {        background: black;        border: 3px solid #000;    }    #grid {        padding-bottom: 50px;    }    ul {        padding-right: 50px;    }    li {        padding-left: 30px;    }    a {        color: white;        font-family: Verdana, Geneva, Tahoma, sans-serif;    }    h1 {        font-family: Verdana, Geneva, Tahoma, sans-serif;        text-align: center;        font-weight: bold;        margin-bottom: 100px;    }    #function {        margin-left: auto;        margin-right: auto;    }    .button {        background-color: DodgerBlue;        margin-left: auto;        margin-right: auto;        }<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid" id="grid">        <div class="row">          <div class="col-sm">            <ul class="nav justify-content-end">                <li class="nav-item">                  <a class="nav-link active" href="#">Converter</a>                </li>                <li class="nav-item">                  <a class="nav-link" href="#">More Products</a>                </li>                <li class="nav-item">                  <a class="nav-link" href="#">About</a>                </li>                            </ul>          </div>                              </div>                </div>      <h1>Convert your jks to p12!</h1>      <div class="container">        <div class="row">          <div class="col-lg-6" id="function">            <div class="input-group">                <div class="custom-file">                  <input type="file" class="custom-file-input" id="inputGroupFile01"                    aria-describedby="inputGroupFileAddon01">                  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>                </div>              </div>          </div>          </div>      </div>

Answer 1

问题是您正在尝试使用 class 来设置 div 的样式buttons，默认情况下其宽度为 100%。您想要做的是设置其中按钮的样式。所以解决方案很简单：将.buttons选择器更改为.buttons button.btn.

#grid div {

  background: black;

  border: 3px solid #000;

}

#grid {

  padding-bottom: 50px;

}

ul {

  padding-right: 50px;

}

li {

  padding-left: 30px;

}

a {

  color: white;

  font-family: Verdana, Geneva, Tahoma, sans-serif;

}

h1 {

  font-family: Verdana, Geneva, Tahoma, sans-serif;

  text-align: center;

  font-weight: bold;

  margin-bottom: 100px;

}

#function {

  margin-left: auto;

  margin-right: auto;

}

.button button.btn {    /* changed */

  background-color: DodgerBlue;

  margin-left: auto;

  margin-right: auto;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container-fluid" id="grid">

  <div class="row">

    <div class="col-sm">

      <ul class="nav justify-content-end">

        <li class="nav-item">

          <a class="nav-link active" href="#">Converter</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">More Products</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">About</a>

        </li>

      </ul>

    </div>

  </div>

</div>

<h1>Convert your jks to p12!</h1>

<div class="container">

  <div class="row">

    <div class="col-lg-6" id="function">

      <div class="input-group">

        <div class="custom-file">

          <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">

          <label class="custom-file-label" for="inputGroupFile01">Choose file</label>

        </div>

      </div>

    </div>

  </div>

</div>

<div class="button">

  <button class="btn">

      <i class="fa fa-home"></i>

    </button>

</div>