调整元素（提交按钮，自定义按钮）
我当前的html页面存在一些问题。我有一个“后退”和“继续”按钮。后退按钮应该只是转到上一页，继续按钮应该提交表单。
我想调整输入字段左侧的后退按钮inputfld，以及inputfld右侧的继续按钮。替代它也没关系，当两个按钮在输入字段的中间调整，但在同一行：
。
此外，我目前的问题是，按钮的大小不同（宽度），但我不知道为什么。 ＆安培;有没有办法可以使用悬停，从后退按钮激活继续按钮？
.contentarea {
width: 300px;
margin: auto;
padding-left: 50%
padding-right: 50%;
padding-bottom: 18px;
display: block;
text-align: center;
}
.content-header {
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
font-weight:700;
}
.input-header{
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
}
input[type=submit].continueButton {
float: right;
width: 100px;
position: relative;
overflow: visible;
padding: 0.5em 1em;
display: block;
border: 1px solid #d4d4d4;
margin: auto;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0 #fff;
font:11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -ms-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-moz-background-clip: padding; /* for Firefox 3.6 */
background-clip: padding-box;
border-radius: 0.2em;
display: block;
margin-right: 5px;
/* IE hacks */
zoom: 1;
}
.backButton {
width: 76px;
position: relative;
overflow: visible;
padding: 0.5em 1em;
display: block;
border: 1px solid #d4d4d4;
margin: auto;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0 #fff;
font:11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -ms-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-moz-background-clip: padding; /* for Firefox 3.6 */
background-clip: padding-box;
border-radius: 0.2em;
display: block;
float: right;
margin-right: 5px;
/* IE hacks */
zoom: 1;
}
.backButton:hover,
.backButton:active {
border-color: #3072b3;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
color: #fff;
background-color: #3c8dde;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
background-image: -moz-linear-gradient(#599bdc, #3072b3);
background-image: -o-linear-gradient(#599bdc, #3072b3);
background-image: linear-gradient(#599bdc, #3072b3);
}
.floated {
display: block;
float: left;
text-align: center;
margin-right:5px;
}
input[type=text].inputfld{
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 250px;
margin-left: 7px;
margin-bottom: 5px;
padding-left: 5px;
display: inline-block;
margin-top: 5px;
opacity: 8;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #3498db inset, 0 -1px 0 #3498db inset, 1px 0 0 #3498db inset, -1px 0 0 #3498db inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../img/keyIcon.png) 12px 11px no-repeat, #FFF;
}
}<div class="contentarea">
<p class="content-header"> [XX] XXXXXXXXXXXX </p>
<span class="input-header">XXXXXXXXX:</span>
<form>
<input type="text" class="inputfld" autofocus />
<a href="index.html" class="backButton floated">Back</a>
<input type="submit" class="continueButton floated" value="Continue" />
</form>
</div>
1 个答案:
答案 0 :(得分：1)
您可以将“继续”按钮放在inputfld的右侧，只需向其添加float: right;即可。
不同的宽度是由元素类型（a - 输入）引起的：
- 输入将其渲染为100px（76px（内容）+ 2 * 11px（填充）2 * 1px（ border ） = 100px ）
- 锚点将其渲染为100px内容宽度，稍后再添加填充和边框宽度（100px（内容）+ 2 * 11px（ padding ）+ 2 * 1px（ border ）= 124px ）。
CSS更改：
input[type=submit].continueButton {
float: right;
}
.backButton {
width: 76px;
/*
border-width: 1px;
padding: 11px;
width: calc(100px - 2*11px - 2*1px);
*/
}
使用inputfld排列按钮的方法有多种：
- 保证金为每个按钮添加25px的边距（300px（容器） - 250px（ inputfld ）= 50px / 2 =
25px ） - 将容器大小（在剪切中）更改为250px（与inputfld相同），左右两侧将与按钮对齐。
- 绝对定位添加
position: absolute;和left: 25px（几乎与第一个相同）
悬停效果：
您的按钮甚至没有悬停效果（？！？），因此将input[type="submit"].continueButton:*****添加到.backButton悬停效果并添加!important（我猜没有更好的方式）。
.contentarea {
width: 255px; /*CHANGED (250px + 5px padding(-left) in inputfld)*/
margin: auto;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 18px;
display: block;
text-align: center;
}
.content-header {
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
font-weight:700;
}
.input-header{
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
}
input[type=submit].continueButton {
float: right; /*CHANGED*/
width: 100px;
position: relative;
overflow: visible;
padding: 0.5em 1em; /*<=== change/delete top+bottom margin (first parameter), when your change the height*/
display: block;
border: 1px solid #d4d4d4;
margin: 0; /*CHANGED*/
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0 #fff;
font:11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -ms-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-moz-background-clip: padding; /* for Firefox 3.6 */
background-clip: padding-box;
border-radius: 0.2em;
display: block;
margin-right: 0; /*CHANGED*/
/* IE hacks */
zoom: 1;
}
.backButton {
width: 76px; /*CHANGED*/
position: relative;
overflow: visible;
padding: 0.5em 1em;
display: block;
border: 1px solid #d4d4d4;
margin: auto;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0 #fff;
font:11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -ms-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-moz-background-clip: padding; /* for Firefox 3.6 */
background-clip: padding-box;
border-radius: 0.2em;
display: block;
float: right;
margin-right: 5px;
/* IE hacks */
zoom: 1;
}
/*CHANGED: .continueButton and "!important" added*/
.backButton:hover,
.backButton:active,
input[type=submit].continueButton:hover,
input[type=submit].continueButton:active {
border-color: #3072b3 !important;
border-bottom-color: #2a65a0 !important;
text-decoration: none !important;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3) !important;
color: #fff !important;
background-color: #3c8dde !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)) !important;
background-image: -moz-linear-gradient(#599bdc, #3072b3) !important;
background-image: -o-linear-gradient(#599bdc, #3072b3) !important;
background-image: linear-gradient(#599bdc, #3072b3) !important;
}
.floated {
display: block;
float: left;
text-align: center;
margin-right:5px;
}
input[type=text].inputfld{
border-radius: 3px;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
transition: all 0.2s linear;
font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
color: #222222;
position: relative;
height: 30px;
width: 250px;
margin-left: 0; /*CHANGED*/
margin-bottom: 5px;
padding-left: 5px;
display: inline-block;
margin-top: 5px;
opacity: 8;
&::-webkit-input-placeholder {
color: #999999;
}
&:-moz-placeholder {
color: #999999;
}
&:focus{
box-shadow: 0 1px 0 #3498db inset, 0 -1px 0 #3498db inset, 1px 0 0 #3498db inset, -1px 0 0 #3498db inset, 0 0 4px rgba(35,146,243,0.5);
outline: none;
background: url(../img/keyIcon.png) 12px 11px no-repeat, #FFF;
}
}<div class="contentarea">
<p class="content-header"> [XX] XXXXXXXXXXXX </p>
<span class="input-header">XXXXXXXXX:</span>
<form>
<input type="text" class="inputfld" autofocus />
<a href="index.html" class="backButton floated">Back</a>
<input type="submit" class="continueButton floated" value="Continue" />
</form>
</div>
<强>蒂普：
你应该更清楚地编写你的代码，我看到一个属性的多个设置（在.contineButton中设置了两次余量），不必要的设置（也是边距）并且代码有些混乱，但你使用注释，这是大。
希望我能帮助 -Minding
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？