Question

我有一行内联表单，其中包含电子邮件表单和下拉表单。调整大小后，下拉列表中的文本已失去其原始位置（左侧文本，右侧箭头。）我尝试使用：

text-align: left;

但是，我的箭头没有与右边对齐，我不知道该怎么做。

HTML文件：

<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row justify-content-center">
    <form class="form-inline">
      <div class="form-group">
        <div class="col-md-8">
        <input type="email" class="form-control" placeholder="Email Address" id="email-form">
      </div> 
       </div>
      <div class="dropdown">
        <div class="col-md-8">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
        </div>
      </div>
    </form>
    </div>
  </div> 
</body>
</html>

CSS文件：

body
{
  background: #000639;
}

#email-form 
{
    line-height: 250%;
    margin-right: 115px;
    width: 158%;
}

#dropdown
{
    line-height: 250%;
    width: 238%;
    text-align: left;
}

.row
{
    margin-top: 10%;
}

全屏：

Answer 1

您可以使用::after选择器定位箭头。

.dropdown-toggle::after {
    position: absolute;
    top: 26px;
    right: -155px;
}

body {
  background: #000639;
}

#email-form {
  line-height: 250%;
  margin-right: 115px;
  width: 158%;
}

#dropdown {
  line-height: 250%;
  width: 238%;
  text-align: left;
}

.row {
  margin-top: 10%;
}

.dropdown-toggle::after {
    position: absolute;
    top: 26px;
    right: -155px;
}

<html>

<head>
  <title>Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="row justify-content-center">
      <form class="form-inline">
        <div class="form-group">
          <div class="col-md-8">
            <input type="email" class="form-control" placeholder="Email Address" id="email-form">
          </div>
        </div>
        <div class="dropdown">
          <div class="col-md-8">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown"> Interested In... </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Answer 2

将左边距调整为:: after选择器。

jsfiddle

.dropdown-toggle::after{

margin-left: 3.3em;
}

Answer 3

使用Flexbox可以轻松获得此效果。将display:flex;添加到#dropdown定义并设置align-items: center;，以便元素在其容器中垂直居中。

确保您的第一个元素向左侧移动，右侧下拉箭头向右侧移动。您可以设置justify-content: space-between，这将尝试填充这两个项目之间的所有空间。

#dropdown {
  line-height: 250%;
  width: 238%;
  text-align: left;
  display:flex;
  align-items: center;
  justify-content: space-between;
}

Flexbox万岁！

在下拉表单Bootstrap中对齐文本

3 个答案: