Question

使用以下代码，摘要及其文本框内嵌对齐。但说明的文本框显示在标签＆＃39;说明＆＃39;下方。如何使其对齐内联？请帮我解决这个问题。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

请尝试以下操作： 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 ：要更改高度，请尝试为rows="8"
的<textarea>值进行更新

Answer 2

如果您正在使用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>

Answer 3

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

从描述输入中删除宽度，也请更改为textarea，而不是输入。

Answer 4

您已经使用过bootstrap 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>

Answer 5

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

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

Answer 6

试试这个：

<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>

Answer 7

如果您在使用它时遇到问题，您也可以在不使用表格的情况下强制使用表格布局：

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

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

在输入和＆＃34;单元格周围添加div＆＃34;上课（并不应该是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

Answer 8

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

<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">

如何通过html排列标签和文本框？

8 个答案: