[英]How to create two HTML buttons side by side
這是兩個按鈕的代碼片段。 我希望它們並排放置,但目前,一個按鈕位於另一個按鈕之上。 如你看到的
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;}
.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>
一個問題是 action_btn 類用於 div 和按鈕,它會干擾。 同樣在您的代碼中,具有 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>
.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>
.btn{display: inline-block; margin-right: 20px;}
使用按鈕的類或 id 在 css 中使用它。
這意味着您希望按鈕並排
改變這個:
.buttons {
width: 960px;
margin: 0 auto;
}
.action_btn {
width: 500px;
margin: 0 auto;
}
對此:
.buttons {
width: auto;
}
.action_btn {
width: auto;
}
或者干脆完全刪除這些 CSS 規則。
我不知道你為什么給按鈕的寬度提供這么大的數字,但結果是兩個按鈕太寬而無法並排放置
使用浮動
<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;
}
您希望按鈕本身在 css 中具有內聯塊。 像這樣
button.action_btn{display: inline-block;}
完成后,添加一些填充和/或邊距以將它們分開。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.