Question

这是两个按钮的代码片段。我希望它们并排放置，但是目前，一个按钮位于另一个按钮之上。如您所见

HTML

    <div class="buttons">

            <div class="action_btn">

            <button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()">Save</button>
            <button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>

            <p id="saved"></p>

            </div>

        </div>

CSS

    .buttons {
width: 960px;
margin: 0 auto;}

    .action_btn {
width: 500px;
margin: 0 auto;}

Answer 1

更改此：

.buttons {
  width: 960px;
  margin: 0 auto;
}

.action_btn {
  width: 500px;
  margin: 0 auto;
}

对此：

.buttons {
  width: auto;
}

.action_btn {
  width: auto;
}

或者只是完全删除这些CSS规则。

我不知道您为什么要为按钮的宽度提供如此大的数字，但是结果是两个按钮都太宽而无法并排放置

Answer 2

.form-control {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  
.form-control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999999;
}
.form-control::-webkit-input-placeholder {
  color: #999999;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}

/* additions */
.btn-inline {
  height: 34px;
  border-radius: 0 4px 4px 0;
  margin-left: -10px;
}

.form-control { 
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding-left: 10px;
}

.form-control:focus { 
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

<form class="form-inline">
  <button class="btn btn-primary btn-inline">Update</button>
  <button class="btn btn-primary btn-inline">Update</button>
</form>

Answer 3

.btn{display: inline-block; margin-right: 20px;}

使用按钮的类或ID在CSS中使用它。

这意味着您希望按钮并排

Answer 4

使用浮点数

<div>
  <div>
    <button name="submit" type="submit" value="Save" onclick="myFunction()" class="button">Save</button>
    <button name="submit" type="submit" value="Cancel" onclick="myFunction2()" class="button">Cancel</button>
    <p id="saved"></p>
  </div>
</div>

和

.button{
    float:left;
    margin:2px;
 }

Answer 5

一个问题是action_btn类用于div和button，它会干扰。同样在您的代码中，具有action_btn类的div看起来很多余，需要删除。考虑到上述情况，您的代码将按以下方式转换。

.buttons {
  width: 960px;
  margin: 0 auto;
}

.action_btn {
  display: inline-block;
  width: calc(50% - 4px);
  margin: 0 auto;
}

<div class="buttons">
		<button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()">Save</button>
		<button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>
		<p id="saved"></p>
</div>

Answer 6

  .buttons {
width: 200px;
margin: 0 auto;
display: inline;}

    .action_btn {
width: 200px;
margin: 0 auto;
display: inline;}

<div class="buttons">

            <div class="action_btn">

            <button name="submit" class="action_btn submit" type="submit" value="Save" onclick="myFunction()">Save</button>
            <button name="submit" class="action_btn cancel" type="submit" value="Cancel" onclick="myFunction2()">Cancel</button>

            <p id="saved"></p>

            </div>

        </div>

Answer 7

您希望按钮本身在CSS中具有内联块。像这样

    button.action_btn{display: inline-block;}

一旦有了，请添加一些填充和/或边距以分隔它们。

如何并排创建两个HTML按钮

7 个答案: