如何让我的文本框更靠近我的标签？

Question

.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: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

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

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

.username-label,
.username-textbox,
.password-label,
.password-textbox {
 margin: 10px 0px 0px 300px;
 position: relative; 
 top: -70px; 
}

#button1{ 
     background-color: #add8e6;
     margin:0px 0px 20px 370px; 
     width: 100px;
     position: relative; 
     top: -70px; 
}

#button2{
  background-color: #add8e6;
}


.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4, 
.username-new-input-textbox, 
.password-new-input-textbox, 
.email-new-input-textbox, 
.reenter-new-input-textbox
{
  margin: 0px 0px 0px 350px;
  position: relative; 
  top: -20px; 
}

<html>

<head>

  <link href="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="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>
      <div id="login">
        <label class="username-label">
         <span>Username</span> &nbsp;
         <input class="existing username-input-textbox" type="text" value="" />
          </label>
        <br/><br/>
        <label class="password-label">
        <span>Password</span> &nbsp;
        <input class="existing password-input-textbox" type="password" value="" />
         </label>
        <br/><br/>
        <button id="button1">Log in</button>
      </div>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>
      <div class= "new_customers_info">
        <label class="Username-label1">
        <span>Username</span>
        <input class="username-new-input-textbox" type="text" value="" />
         </label>
         <br/><br/>

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

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

        <label class="Repeat-Email-label4">
        <span>Repeat Email Address</span> 
         <input class="reenter-new-input-textbox" type="text" value="" />
         </label>
         <br/><br/>

        <button id="button2">Create Account</button>
      </div>
    </div>
  </div>
   <br/><br/>
  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
</body>
</html>

我在想办法让我的文本框更靠近我的标签。如何使用 CSS 实现此目的？我尝试搞乱 margin left 定位，但这只会将元素进一步向右移动。有什么建议么？这是我的代码。

Answer 1

您是否尝试过将左边距设置为负数？

Answer 2

您同时拥有标签和输入。但是，如果您将输入与边距放在一起，它们会进一步移动。应该更像这样：

.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4
{
  margin: 0px 0px 0px 350px;
  position: relative; 
  top: -20px; 
}
.username-new-input-textbox, 
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox
{
position: relative;
}

Answer 3

您的 input 和 span 标签的样式都是 display: inline-block。 inline-block 规则实际上考虑了 HTML 中的间距。处理此问题的几种方法是将元素放在同一行，在 HTML 元素之间添加注释以填充 space，或者添加 CSS 规则考虑到 html 文件中的间距。

HTML 修正

保持代码在同一行

<span>Your Label Text</span><input type="text" value="Your Input Text" />

或

在元素之间放置注释

注：()

    <span>Your Label Text</span><!--
 --><input type="text" value="Your Input Text" />

CSS修复

input {
    margin-left: -2px;
}

旁注：您的 html 的结构目前是：

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

但应该是这样的：

<label class="password-label" for="passwordId">Password</label>
<input id="passwordId" class="existing password-input-textbox" type="password" value="" />

span 标签已删除，因为您没有专门为其添加任何类型的样式，并且 input 元素已从 label 标签中删除，因此您可以利用标签的 for 属性，它将通过输入的 id 属性值 link 你的 label 到你的 input。现在 for 标签已 link 编辑到 input 标签，如果您单击该标签，它会将焦点放在您的输入字段中。此外，请注意删除不间断 space 实体 ( ).

如何让我的文本框更靠近我的标签？

How can I get my textboxes to be closer to my labels?

html

css

margins

HTML 修正

保持代码在同一行

在元素之间放置注释

CSS修复