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

Posted 2023-03-05

【中文标题】按钮不会在所有分辨率上左对齐

【英文标题】：Button won't align left on all resolutions

【发布时间】：2018-11-26 12:02:07

【问题描述】：

我创建了一个带有联系表格 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;

谁能告诉我如何让它工作？

【参考方案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 属性的末尾。