Question

我想在一个部分内水平放置3个按钮一个在最左边，另一个在最右边，第三个在中心

像这样的事情

CSS代码：

.buttons {
  padding: 1em;
  display: table;
  margin: 0 auto;
}
#next {
  margin: auto;
  display: block;
  background: white;
  color: #00476B;
  border: none;
  padding: .5em 1em;
  width: 100%;
}
#back {
  margin: auto;
  display: block;
  background: white;
  color: #00476B;
  border: none;
  padding: .5em 1em;
  width: 100%;
}
#submit {
  margin: auto;
  display: block;
  background: white;
  color: #00476B;
  border: none;
  padding: .5em 1em;
  width: 100%;
}

Answer 1

试试这个。只需在按钮上应用CSS即可更改样式。希望它对你有用。

＆＃13;

.button-container{
  text-align:center;

}

.button-container:after{
  clear:both;
  content: "";
}

.btn{
  display:inline-block;
}

.btn-left{
  float:left;
}

.btn-right{
  float:right;
}

＆＃13;

<div class="button-container">
  <button class="btn btn-left">Left Button</button>
  <button class="btn btn-centered">Centered Button</button>
  <button class="btn btn-right">Right Button</button>
</div>

＆＃13;

Answer 2

float和自动边距的组合将起作用，如此片段所示：

https://jsfiddle.net/0btrggpm/1/

section{
    width: 100%;
    display: flex;
}
button{
    width: 50px;
}
#left{
    float:left;
}
#right{
    float:right;
}
#center{
    margin:0 auto;
}

<section>
    <button id="left">Left</button>
    <button id="center">Center</button>
    <button id="right">Right</button>
</section>

您可以为按钮添加边距，以便将其与屏幕边缘区分开来。

Answer 3

不要给按钮宽100％，就像......

＆＃13;

.buttons {
  padding: 1em;
  display: table;
  margin: 0 auto;
}
.btn{
  width: 100%;
  display: block;
  position: relative;  
}
#next {
  margin: 0;
  float: right;  
  display: absolute;
  background: #aff;
  color: #00476B;
  border: none;
  padding: .5em 1em;  
}
#back {
  
  display: block;
  float: left;
  background:#aff;
  color: #00476B;
  border: none;
  padding: .5em 1em;
  
}
#submit {
  margin: auto;
  left : 50%;
  display: block;
  background: #aff;
  color: #00476B;
  border: none;
  padding: .5em 1em;
  
}

＆＃13;

<body>
<div class="btn">

<button class="buttons" id="back">Back</button>
<button class="buttons" id="next">Next</button>
<button class="buttons" id="submit">Submit</button>
</div>
</body>

＆＃13;

如何在一个部分内水平放置按钮

3 个答案: