在中心对齐表单中的项目

Question

我是前端的新手。我其实想制作一个看起来像的标记，

所以，我尝试了以下方式，

 <div className="row">
    <div className="col-xs-4">
      <div className="has-feedback">
        <label className="control-label">Search Job</label>
          <input type="text" className="form-control" id="inputValidation" placeholder="Search"/>
               <span className="glyphicon glyphicon-search form-control-feedback"></span>
         </div>
      </div>
</div>

现在，在这里，我得到的是

谁能帮我这个？

Answer 1

这是完整的代码:)

<!DOCTYPE html>
<html lang="en">
<head>
<title>form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
  .mi-abc {
    padding: 10px;
    display: inline-block;
    background: lightgrey;
  }
  .mi-control {
    width: 75%;
    height: 35px;
    padding-left: 10px;
  }
  .mi-icon {
    position: absolute;
    right: 30px;
    top: 20px;
  }
</style>
</head>
<body>        
  <div class="col-md-3 mi-abc">
    <div class="wrapper">
      <label class="mi-label">Search Job</label>
      <input type="text" class="mi-control" placeholder="Search"/>
      <span class="glyphicon glyphicon-search mi-icon"></span>
    </div>
  </div>        
</body>

Answer 2

你可以使用float属性。

.control-label,.form-control{
        float:left;
    }

它将为您提供左边的元素。所以标签首先出现，然后输入将出现在它的右边

你也可以使用flex

Answer 3

<div class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Search</label>
    <input type="text" readonly class="form-control" id="staticEmail2" value="" placeholder="search">
  </div>
  </div>

Bootstrap Form page

Answer 4

请使用“class”而不是“className”，您可以使用bootstrap文档中已有的“pull-left”类。您可以使用以下链接作为参考。

https://getbootstrap.com/docs/4.0/components/forms/

Answer 5

如上所述，最好的方法是使用.has-feedback上的flex属性，如下所示：

.has-feedback{
  display: flex;
}

默认情况下，这将使其水平对齐。

你也可以float .has-feedback的孩子左右。

但是，如果你选择漂浮孩子，准备必须清除.has-feedback，以便它可以计算它的孩子周围的高度。你可以在这里找到一个如何做到这一点的例子：https://css-tricks.com/snippets/css/clear-fix/

在中心对齐表单中的项目

问题描述投票：0回答：5

5个回答

最新问题

在中心对齐表单中的项目

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5