如何对齐输入框 div

Question

我正在尝试对齐登录页面中的一些内容。我希望图片显示在输入框的左侧，div 下方的按钮显示在左侧和右侧。像这样：

但这就是正在发生的事情（在 Safari 上。Chrome 工作正常，如您在顶部图片中所见）

问题是，虽然它在 Chrome 上部分有效，但输入框太小，我无法增加它们的大小。

这是我正在尝试使用的代码：

// Outer white DIV for the forms and buttons:

.login-form {
  width: 360px;
  height: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 19px 29px 29px 19px;
  color: #444444;
  background: rgba(253, 253, 253, 1.000);

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border: solid 1px rgba(144, 144, 144, 0.075);
}

// Login field for e-mail:

.login-field-up {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-right: 100px;
  float: left;
  display: inline-block;
}

/ Login field for password:

.login-field-down {
  margin-top: 10px;
  margin-bottom: 15px;
  float: left;
}

// DIV for Icons of user credential and golden key:

.login-icon {
  margin-top: 15px;
  margin-right: 15px;
  float: left;
  display: inline-block;
}

// Right checbox:

.right-col {
  float: right;
  text-align: center;
  margin-top: 10px;
}

Left blue login button: 

.left-col {
  float: left;
  margin-left: 10px;

}

如果有任何其他简单的方法可以做到这一点，我会尽力而为。因为我一直在后端工作，所以我很讨厌 CSS.

<section id="banner">
    <h2>Title</h2>
    <section>
        <div id="skel-layers-wrapper" class="login-form">
            <form method="post" action="{% url 'principal' %}">
                <div class="login-icon">
                    <img src="{% static "icons/identity.png" %}" class="icons">
                </div>
                <div class="login-field-up">
                        <input type="text" name="username" id="username" placeholder="E-mail" />
                </div>
                <div class="login-icon">
                    <img src="{% static "icons/key_user.png" %}" class="icons">
                </div>
                <div class="login-field-down">
                        <input type="password" name="password" id="username" placeholder="Password" />
                </div>
                <div class="left-col">
                        <input type="submit" value="Login!" class="button" />
                </div>
                <div class="right-col">
                    <input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
                    <label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
                </div>
            </form>
        </div>
    </section>
</section>

Answer 1

您可以通过在样式 sheet 中设置 "font-size" 属性来增加输入框的大小，例如，

input { font-size:2em; }

并且可以使用<label></label>将图片与输入框对齐，例如

<label for="email"><img src="image.png" /></label> <input type="email" placeholder="E-mail" name="email" />

或者，您也可以将图像放在单独的 div 中，将输入放在另一个 div 中，然后调整宽度、边距或填充以按照您想要的方式对齐它们。

但正如 Billy 所说，如果您 post 您的 html 代码，将更容易提供解决方案。

编辑： 感谢您的代码。我想你想实现这样的目标。我添加了一些边框来帮助您理解 div 的位置。完成调试后删除它们并更改图像的 url。

<!DOCTYPE html>

<html>

<head>

 <style>
 
  .login-form {
  width: 360px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 19px 29px 29px 19px;
  color: #444444;
  background: rgba(253, 253, 253, 1.000);
  
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border: solid 1px rgba(144, 144, 144, 0.075);
  
  border:1px solid black;
  }
  
        #title-header {
            text-align:center;
        }

  #username, #password {
   margin-left:20px;
  }
  
  input {
   font-size:1em;
  }
  
  img {
   width:16px;
   height:16px;
  }
  
  .login-field-up {
  margin-left:50px;
  width:250px;
  border:1px solid black;
  }
  
  .login-field-down {
  margin-left:50px;
  width:250px;  
  border:1px solid black;
  margin-top:20px;
  margin-bottom:20px;
  }

  .login-icon {
  border:1px solid black;
  }

  .right-col {
  float:left;
  width:160px;
  margin-left:30px;
  border:1px solid black;
  }

  .left-col {
  margin-left:50px;
  float:left;
  width:60px;
  border:1px solid red;
  }
  
  .inner-wrapper {
   margin-top:50px;
   width:350px;
   height:150px;
   border:1px solid red;
  }
  
 </style>


<section id="banner">
    <h2 id="title-header">Title</h2>
    <section>
        <div id="skel-layers-wrapper" class="login-form">
            <form method="post" action="{% url 'principal' %}">
    <div class="inner-wrapper">
     <div class="login-field-up">
      <img src="image.png">
      <input type="text" name="username" id="username" placeholder="E-mail" />
     </div>
     <div class="login-field-down">
       <img src="image.png">
       <input type="password" name="password" id="password" placeholder="Password" />
     </div>
     <div class="left-col">
       <input type="submit" value="Login!" class="button" />
     </div>
     <div class="right-col">
      <input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
      <label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
     </div>
    </div>
   </form>
        </div>
    </section>
</section>

如何对齐输入框 div

How to align input box with div

css

alignment