如何通过html对齐标签和文本框？

使用下面的代码，摘要和它的文本框是内嵌对齐的。但描述文本框出现在标签'description'的下面。我怎样才能让它内联对齐？请帮我解决这个问题。如何通过html对齐标签和文本框？

.left { 
 
     width: 30%; 
 
     float: left; 
 
     text-align: right; 
 
    } 
 
    .right { 
 
     width: 65%; 
 
     margin-left: 10px; 
 
     float: left; 
 
    }

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2"> 
 
     <h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1> 
 
     <form action="post" class="login-form"> 
 
      <div> 
 
      <label class="left">Summary:</label> 
 
      <input class="right" type="text" name="Summary" size="50"> 
 
      </div> 
 
      <div> 
 
      <label class="left">Description:</label> 
 
      <input class="right" type="text" name="Description" style="height:100px;width:400px"> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div>

来源

2016-03-03 Rahul

你的意思是将其调整到中间，垂直？ –

不，我希望标签和它的文本框水平显示（即文本框应显示在标签旁边）。 – Rahul

样式与标签的div和输入向左浮动 –

尝试这样的：Demo

如果你需要多行text中，使用textarea而不是输入型text

<div class="form-group row"> 
    <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label> 
     <div class="col-md-6 col-sm-12"> 
     <input type="text" class="form-control" name="Summary" size="50"> 
     </div> 
    </div> 

    <div class="form-group row"> 
     <label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label> 
     <div class="col-md-6 col-sm-12"> 
     <textarea class="form-control" name="Description"></textarea> 
     </div> 
    </div>

编辑：

正如你提到的，它不是form-control类，它的form-control-label ..你可以得到更多的信息here

更新Demo：要改变高度，尝试<textarea>

来源

2016-03-03 09:11:17

这看起来不错。谢谢！但箱子的大小非常小......我可以如何增加它们？ – Rahul

@Rahul：你想增加哪个箱子尺寸？你可以根据你的要求调整col-md-6到1到12列的任何值 –

非常感谢:)它为我工作。顺便说一句，你能让我知道在标签标签中使用'表格控制'吗？我不确定。 – Rahul

喜欢这个？
https://jsfiddle.net/d6tscd18/

.left { 
    width: 30%; 
    display: inline-block; 
    text-align: right; 
} 
.right { 
    width: 65%; 
    margin-left: 10px; 
    display: inline-block; 
}

来源

2016-03-03 09:11:08

尽管它在小提琴中正确显示，但它在浏览器中是不正确的。即使描述框在标签下面 – Rahul

您使用哪种浏览器不会有什么区别吗？ –

am使用镀铬 – Rahul

如果chnaging的rows="8"值你正在使用Bootstrap（就像你的代码中的类一样）。我会建议使用他们的表单布局选项。听起来像是你想有一个横向形态：

Docs

例如：从描述的输入

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="summary" class="col-sm-2 control-label">Summary</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="summary" /> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="description" class="col-sm-2 control-label">Description</label> 
    <div class="col-sm-10"> 
     <input type="text" class="form-control" id="description" style="height:100px;width:400px" /> 
    </div> 
    </div>  
</form>

来源

2016-03-03 09:12:12 Starscream1984

<input class="right" type="text" name="Description" style="height:100px;width:400px;">

删除宽度，也请切换到文本区域，而不是输入。

来源

2016-03-03 09:16:12

使用textarea后，所有的代码默认显示在描述文本框中 – Rahul

试试这个：

<html> 
    <head> 
    <title>sample</title> 
    <style type="text/css"> 
     .left { 
      width: 30%; 
      display: inline-block; 
      text-align: right 
     } 
     .right { 
      margin-left: 10px; 
      display: inline-block; 
     } 
    </style> 

    </head> 

    <body> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2"> 
      <h1 class="text-center" style="font-family:Colonna MT;font-     size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1> 
<form action="post" class="login-form"> 
     <div> 
     <label class="left">Summary:</label> 
     <input class="right" type="text" name="Summary" size="50" style="width:400px"> 
     </div> 
    <div> 
     <label class="left">Description:</label>  
     <input class="right" type="text" name="Description" style="height:100px;width:400px"> 
    </div> 
</form> 
    </div> 
</div> 
</div> 
</body> 
</html>

来源

2016-03-03 09:17:01

这是内联的垂直方向，太不适当了。请回顾一次。 – Rahul

您已经使用引导framework.so没有必要写额外的CSS内嵌形式。遵循下面的代码

<div class="form-group"> 
    <label class="col-lg-3 control-label ">City</label> 
     <div class="col-lg-9"> 
     <div class="form-inline"> 
      <div class="form-group "> 
      <div class="col-lg-12"> 
       <label class="sr-only" for="city">City</label> 
       <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" > 
      </div> 
      </div> 
      <div class="form-group "> 
      <div class="col-lg-12"> 
       <label class="sr-only" for="county">County</label> 
       <input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" > 
      </div> 
      </div> 
     </div> 
     </div> 
    </div>

来源

2016-03-03 09:34:49

如果你有麻烦它在的地方，你也可以强制表的布局，而无需使用表：

.login-form { 
    display: table; 
} 
.login-form>div { 
    display: table-row; 
} 

.cell { 
    display:table-cell; 
    vertical-align: top; 
} 
...

添加围绕输入一个div和“细胞”类（并且它不应该是一个textarea）：

... 
<form action="post" class="login-form"> 
    <div> 
     <label class="left cell">Summary:</label> 
     <div class="cell"> 
      <input class="right" type="text" name="Summary" size="50"> 
     </div> 
    </div> 
    <div> 
     <label class="left cell">Description:</label> 
     <div class="cell"> 
      <textarea class="right" name="Description" style="height:100px;width:400px"></textarea> 
     </div> 
    </div> 
</form> 
...

Check it here

来源

2016-03-03 09:42:54 jazZRo

从描述输入类型中删除样式属性，它将显示为摘要输入框。

<form action="post" class="login-form"> 
    <div> 
    <label class="left">Summary:</label> 
    <input class="right" type="text" name="Summary" size="50" style="width:400px"> 
    </div> 
<div> 
    <label class="left">Description:</label>  
    <input class="right" type="text" name="Description">

来源

2016-03-03 10:52:39 Gyan

如何通过html对齐标签和文本框？

回答

相关问题