html - 如何让我的文本框更靠近我的标签？-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 21:14:15

24

4

.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 定位，但这只会将元素进一步向右移动。有什么建议么？这是我的代码。

最佳答案

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

.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;
}

关于html - 如何让我的文本框更靠近我的标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43639222/

24

4

0

文章推荐： OpenCV IP 摄像机图像恶化

文章推荐： python - 如何解压 pkl 文件？

文章推荐： c# - 列表框中未选择任何项目时禁用 asp 按钮

javascript - 将数据从应用程序组件[文本框]传递到网站组件[文本框]
我正在为一个网站开发应用程序(我无法访问该网站)。所以我想做以下事情: 那么如何将文本数据从 Android View 传递到网页中的文本框并捕获来自网站的响应？我试图记住这一切我无法访问任何网站
Silverlight 文本框
我有一个文本框，里面有一个很长的 url。我想做的是，当用户点击主页按钮时，我希望光标移动到文本框的开头。我希望这是正常行为，但事实并非如此，当文本框内的文本很长时，我点击回家，它会转到文本框中当前
带有图像的 WPF 文本框
我正在做一个WPF登录界面。在我的登录面板中，我有一个登录 TextBox和 PasswordBox .如下图第一张所示，登录文本框中有一个小人类标志，密码框中有一个锁。我将图像设置为文本框背景，然后
wpf - 文本框 - 水平文本居中
是否有任何简单的方法可以使文本在文本框中居中？我正在寻找一些内置函数，但什么也没找到。最佳答案将 TextAlignment 属性设置为 Center: 关于wpf - 文本框 - 水平文本居中
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
java - Android 文本框
我想将纬度和经度的值返回到我的 EditText 中，我已经能够使用 Toast 来做到这一点，但没有通过实现它>编辑文本。请帮忙 // EditText latEditText =
Jquery Iframe 文本框
我是Jquery新手，其实我对JQuery的使用知识是0。我正在尝试使用 JQuery 来实现某些功能。我有一个带有 iframe 的 html 页面。 iframe 页面中有一个表单和一个文本框。
c# - 在动态创建的事件处理程序中访问动态创建的控件(文本框)
我正在尝试在 Button 的事件处理程序中访问我在 C# 中动态创建的 TextBox。 void MainFormLoad(object sender, EventArgs e)
javascript - 文本框 -> 立即开始输入而不是单击文本框
我有一个搜索栏，当我打开搜索栏时，我想立即开始输入，不想点击文本框。我尝试使用 myTextBoxId.click()(因为当您单击它时，您可以开始输入)但它不起作用。最佳答案你必须 docum
Javascript 文本框 "Scrubber"
我还没有找到好的解决方案:我有一个文本框，用户需要能够在其中输入特定信息。例如，命令可能是“9030 OUT FU [1234 TEST]”。我需要“擦洗”这个文本框以确保数据是以这种格式输入的(不
Java 文本框 - 将字节转换为字符串
我有一个 Java 应用程序，您可以在其中将字符串输入文本框，点击加密，它会在单独的文本框中显示加密的字符串。我将为此使用 AES 加密。问题是我无法让加密文本按字节显示，但文本框不会显示字节(仅采用
html - 文本框，将文本带到文本框中的下一行
我已经浏览了您庞大的问题数据库，但似乎没有找到答案。我在将文本换行时遇到问题 - 即使之前的行上仍有空间。这是代码: p1 { border-left: 6px solid blue; bac
javascript - 如何触发按钮打开用户输入/文本框
所以我正在尝试创建“看板/待办事项列表”网站，但我在触发添加按钮时遇到了问题。我试图触发“添加”按钮以打开用户输入框。所以我有这个创建一个小框的“添加”按钮。但我无法弄清楚如何在该框中添加一个小区域，
javascript - JavaScript 文本框
我有一个文本框，应该只接受浮点值。它不应该允许任何其他值。怎么做。我在 HTML 中完成了此操作。 Weight 但是，它不起作用？如何做到这一点。最佳答案 // remo
javascript - 文本框 - 如何不显示已填充的值
当用户点击文本框时，如何不显示出现在文本框下方的已填充值最佳答案将这个属性放在你的文本框中 autocomplete="off" 关于javascript - 文本框 - 如何不显示已填充的值，我
javascript - flex 文本框
JavaScript: function resize(elem){ if(!elem.value.length) elem.size=1; else elem.size=elem.value
带有两个按钮的 HTML 文本框
在我的代码下面，我需要它具有相同的宽度和高度，但有多行“从第一行开始”，当到达行尾时转到新行，只有 120 个字符，就像我用“Enter短信”当您向右单击时隐藏，但我需要它为灰色。最佳答案您可以使
C#、文本框、.NET
我有一个问题，我必须创建一种方法来搜索显示在多个文本框 (lblResult.Text) 中的选定文本文件的内容。使用简单的搜索算法:搜索用户输入的整个搜索词。例如，如果用户输入“hello”，则只搜
c# - 文本框.SelectionStart
我正在尝试对文本框使用 SelectionStart 和 SelectionLength 属性。它没有效果，但也没有错误。它实际上是后台工作程序 ProgressChanged 方法的一部分，但我已经

首页

博学

6Ren·AI

商城

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