2
У меня есть несколько проблем с моей текущей страницей 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 {
\t float: right;
width: 100px;
position: relative;
overflow: visible;
padding: 0.5em 1em;
\t 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;
\t }
.backButton {
\t \t width: 76px;
position: relative;
overflow: visible;
padding: 0.5em 1em;
\t 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;
\t 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">
\t <p class="content-header"> [XX] XXXXXXXXXXXX </p>
\t \t \t \t <span class="input-header">XXXXXXXXX:</span>
\t \t \t <form>
\t \t \t \t <input type="text" class="inputfld" autofocus />
\t \t \t \t <a href="index.html" class="backButton floated">Back</a>
\t \t \t \t <input type="submit" class="continueButton floated" value="Continue" /> \t \t
\t \t \t </form>
\t \t </div>
Кнопки имеет разные размеры, так как кнопка «Назад» является якорем и «Продолжить» является кнопкой ввода типа. Также ваш код грязный. Можете ли вы опубликовать ссылку на веб-страницу? – Ionut
Я редактировал свой код, теперь вы можете выполнить исходный код. – Matej
Почему у вас есть кнопка «Назад» после ввода текста в вашем HTML? – Ionut