按钮在所有分辨率上都不会左对齐

Question

我创建了一个联系表单7的表单，这里是我生成的代码：

<div style="width:50%;float:left;"><label>
    [textarea* your-message placeholder"messsage"] </label></div>

<div style="width:50%;float:right;"><label> 
    [text* your-name placeholder"name*"] </label></div>

<div style="width:50%;float:right;"><label> 
    [text* company-name placeholder"company's name"] </label></div>

<div style="width:50%;float:right;"><label> 
    [tel* tel-783 id:tel-783 class:tel-783 placeholder"phone*"] </label></div>

<div style="width:50%;float:right;"><label> 
[email email-731 id:email-731 class:email-731 placeholder"email"]

<label> [submit id:button-22 class:button-22 "send"]</label>

我试图让按钮左对齐并保持在同一个地方，无论屏幕的分辨率如何，但是浮动：左侧和位置：固定并不适合我。实际上，位置：固定使我的按钮消失所以我用了相对而不是。这是当前的CSS：

input[type='text'],
input[type='tel'],
input[type="email"] {
  text-align: right;
  font-family: heebo;
  color: #001a71 !important;
  background-color: #ffffff !important;
  border: 1px solid #001a71 !important;
  font-size: 1.563em !important;
  height: 20px;
  margin-bottom: -30px !important;
  margin-top: -28px !important;
  position: relative !important min-width: 190px;
}

textarea {
  height: 190px;
  text-align: right;
  font-family: heebo;
  color: #001a71 !important;
  background-color: #ffffff !important;
  border: 1px solid #001a71 !important;
  font-size: 1.563em !important;
  margin-top: -4px !important;
  margin: 0 -10px;
  position: relative !important min-width: 190px;
}

#button-22 {
  text-transform: uppercase;
  background: #4a5ba8;
  color: white;
  border: 1px solid #4a5ba8;
  font-family: 'Heebo', sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  transition: all 0.5s ease 0s;
  padding: 10px;
  margin: 0 -13.2em;
  position: relative min-width:43.446 px max-width: 43.446px;
  !important float: left !important;
}

.contact-form-wrapper input[type=”submit”] float: left !important;

}
#button-22:hover {
  text-transform: uppercase;
  background-color: transparent;
  color: #4a5ba8;
  border: 1px solid #4a5ba8;
  font-family: 'Heebo', sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  transition: all 0.5s ease 0s;
  padding: 10px;
  position: relative min-width:43.446 px max-width: 43.446px float: !important;
}

有人可以告诉我如何让它发挥作用吗？

Answer 1

您可以使用position: absolute;并使用left和bottom属性来定位按钮。

基于CSS的示例代码：

#button-22 {
text-transform: uppercase;
background: #4a5ba8;
color: white;
border: 1px solid #4a5ba8;
font-family: 'Heebo', sans-serif;
font-size: 1.5em;
font-weight: 300;
transition: all 0.5s ease 0s;
padding: 10px;
margin:0 -13.2em;
position: absolute;
left: 0 /* adjust this as required */
bottom: 0 /* adjust this as required */
min-width:43.446 px;
max-width: 43.446px !important;
}

希望这有帮助。

请确保将;放在您定义的每个CSS属性的末尾。