如何让我的文本框和按钮对齐，看起来像图片？

时间：2017-04-25 16:42:52

标签： html css margin

Here is the image 

.intro h1 {
  font-family: 'Cambria';
  font-size: 16pt;
  font: bold;
  text-align: left;
}

.intro p {
  font-family: 'Calibri';
  font: italic;
  font-size: 12pt;
  padding: 0px 690px 0px 20px;
  text-align: left;
}

.content {
  border: 2px solid;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

#para1 {
  padding: 0px 1050px 0px 20px;
}

#para2 {
  padding: 0px 1099px 0px 20px;
}

.username-label,
.username-textbox,
.password-label,
.password-textbox {
  margin: 0px 0px 0px 400px;
}

#button1,
#button2 {
  background-color: #add8e6;
}
<html>

<head>

  <link href="~/Styles/Home.css" rel="stylesheet" />
  <title>Project</title>

</head>

<body>
  <script src="~/Scripts/jquery-2.1.1.min.js"></script>

  <script src="~/Scripts/jquery-ui.min.js"></script>
  <script src="~/Scripts/Home.js"></script>

  <div class="intro">

    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

    <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  </div>
  <br/>

  <div class="content">
    <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
    <div class="username-label">Username </div>
    <div class="username-textbox">
      <input class="existing username-input-textbox" type="text" value="" />
    </div>

    <div class="password-label">Password</div>
    <div class="password-textbox">
      <input class="existing password-input-textbox" type="text" value="" />
    </div>
    <button id="button1">Log in</button>
    <hr />

    <p id="para2">New users, please create a new account by providing us with some basic information.</p>
    <div class="Username-label1">Username: </div>
    <div class="username-textbox1">
      <input class="username-new-input-textbox" type="text" value="" />
    </div>
    <div class="Password-label2">Password:</div>
    <div class="password-textbox2">
      <input class="password-new-input-textbox" type="text" value="" />
    </div>
    <div class="Email-label3">Email:</div>
    <div class="email-textbox3">
      <input class="email-new-input-textbox" type="text" value="" />
    </div>
    <div class="Repeat-Email-label4">Repeat Email Address:</div>
    <div class="repeat-email-textbox4">
      <input class="reenter-new-input-textbox" type="text" value="" />
    </div>
    <button id="button2">Create Account</button>

  </div>

  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</body>

</html>

我无法将文本框和按钮对齐，看起来像附加图像。也有人可以告诉我应该如何使我的元素周围的半径边界像pic一样小？到目前为止，这是我的代码。任何建议将不胜感激。

1 个答案:

答案 0 :(得分：0)

反对我更好的判断，我继续做你的家庭作业：）

我想向您展示使用flexbox的选项

这是一个great resource

＆＃13;
＆＃13; 
body {
  font-family: 'Calibri';
  font-size: 12px;
}

.intro h1 {
  font-family: 'Cambria';
  font-size: 16pt;
  font: bold;
  text-align: left;
}

.intro p {
  font: italic;
  font-style: italic;
}

.content {
  border: 2px solid;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  padding: 10px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
}

.content hr {
  width: 100%
}

.row {
  display: flex;
  justify-content: space-between;
}

form {
  display: inline-block;
  margin-bottom: 20px;
}

form label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  line-height: 20px;
}

form label span {
  margin-right: 10px;
}

form label input {
 /* text-align: right;*/
  margin: 8px 0;
}

#para1,
#para2 {
  width: 40%;
}

button {
  border: none;
  border-radius: 15px;
  height: 30px;
  min-width: 150px;
  background-color: #add8e6;
  margin: 0;
  float: right;
}

button:hover {
  border: 1px solid #000;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="intro">

    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

    <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  </div>
  <br/>

  <div class="content">
    <div class="row top">
      <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
      <form id="login-form">
        <label class="username-label"><span>Username</span> <input class="existing username-input-textbox" type="text" value="" /></label>


        <label class="password-label"><span>Password</span> <input class="existing password-input-textbox" type="password" value="" /></label>

        <button id="button1">Log in</button>
      </form>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>
      <form id="create-form">

        <label class="Username-label1"><span>Username</span>  <input class="username-new-input-textbox" type="text"  /></label>

        <label class="Password-label2"><span>Password:</span><input class="password-new-input-textbox" type="password"  /></label>

        <label class="Email-label3"><span>Email:</span><input class="email-new-input-textbox" type="email"  /></label>

        <label class="Repeat-Email-label4"><span>Repeat Email Address:</span><input class="reenter-new-input-textbox" type="email"  /></label>

        <button id="button2">Create Account</button>
      </form>
    </div>
  </div>

  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
＆＃13; 
def doSomething[T <: A](arg1: T, arg2: Any, ...): T
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题