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

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>

无论屏幕分辨率如何，我都尝试让按钮左对齐并保持在同一个位置，但是 float: left 和 position: fixed 对我都不起作用。实际上，position:fixed 让我的按钮消失了，所以我改用了 relative。这是当前 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 属性的末尾。

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

Button won't align left on all resolutions

html

css

wordpress

plugins

contact-form-7