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

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> <div class="button"> <button class="btn"> <i class="fa fa-home"></i> </button> </div>

Answer 1

问题是您正在尝试使用类buttons设置 div 的样式，默认情况下该类的宽度为 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>