gpt4 book ai didi

html - 为什么我的按钮不对齐?

转载 作者:太空宇宙 更新时间:2023-11-04 08:30:09 25 4
gpt4 key购买 nike

我正在制作一个程序,但出于某种原因,我的按钮没有正确对齐。我尝试制作一个 codepen,但无论何时制作,它看起来都与我在网页上的不一样。我希望它只是我的眼睛在样式上遗漏的一些小东西,我正在使用 Bootstrap 并且只希望所有内容都很好地对齐在一条线上。

这是我的 html:

<div class="panel-heading">
<h3 class="panel-title pull-left">Person Summary</h3>

<div style="float: left;">
<button class="btn btn-default btn-margin">Save</button>
<button class="btn btn-default btn-margin">Edit</button>
</div>

<div style="float: right;">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="clearfix"></div>
</div>

这是 css,其中大部分用于 onoffswitch:

.panel-heading {
background-color: #165284;
}

.panel-heading h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
width: 75%;
padding-top: 8px;
font-weight:bold;
color: white;
}

.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #000000;
border-radius: 20px;
}

.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}

.onoffswitch-inner:before {
content: "Days";
padding-left: 10px;
background-color: #84161B;
color: #FFFFFF;
}

.onoffswitch-inner:after {
content: "Hours";
padding-right: 10px;
background-color: #84161B;
color: #FFFFFF;
text-align: right;
}

.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #000000;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

这是它目前的样子的图片 enter image description here

最佳答案

HTML

<div class="panel-heading clearfix">
<h3 class="panel-title pull-left">Person Summary</h3>

<div class="btns-container pull-right">
<div style="display:inline-block">
<button class="btn btn-default btn-margin">Save</button>
<button class="btn btn-default btn-margin">Edit</button>
</div>
<div style="display:inline-block;vertical-align:middle;">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>

CSS

.panel-heading {
background-color: #165284;
}

.panel-heading h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
padding-top: 8px;
font-weight:bold;
color: white;
}

.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #000000;
border-radius: 20px;
}

.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}

.onoffswitch-inner:before {
content: "Days";
padding-left: 10px;
background-color: #84161B;
color: #FFFFFF;
}

.onoffswitch-inner:after {
content: "Hours";
padding-right: 10px;
background-color: #84161B;
color: #FFFFFF;
text-align: right;
}

.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #000000;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

将按钮包装在一个 div 中并添加类 pull-right。并将 clearfix 添加到面板标题

同时移除 h3 元素的宽度

希望这对您有帮助..

关于html - 为什么我的按钮不对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44852342/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com