Question

我试图在标题中向右拉一个带有输入文本字段的按钮，这是我的代码：

<div class="page-header">
    <div class="pull-left">
        <h2>Header</h2>
    </div>
    <div class="pull-right">
        <div class="form-group label-floating">
            <label class="control-label" for="focusedInput1">Search</label>
            <input class="form-control" id="focusedInput1" type="text">
        </div>
        <button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
    </div>
    <div class="clearfix"></div>
</div>

所以你可以看到，我在左侧标题的标题和右边我想在同一行输入和一个或多个按钮，问题是如果我只添加按钮它's如果我在输入中添加一个表格组，则可以完美地完成所有工作，如下图所示。

我怎样才能拥有同一条线？

由于

Answer 1

尝试制作此div

div class =＆＃34; form-group label-floating＆＃34;

按下按钮

button id =＆＃34; show-hide-filter-button＆＃34;

在 div 上使用css ＆＃34; display：inline-block＆＃34; （默认情况下，使用＆＃34; display：block＆＃34; ）

Answer 2

添加显示：内联到.form-group，或显示：flex到.pull-right

Answer 3

您可以使用Flexbox执行此操作，只需在标题和display: flex类上使用pull-right。

.page-header, .pull-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="page-header">
  <div class="pull-left">
    <h2>Header</h2>
  </div>
  <div class="pull-right">
    <div class="form-group label-floating">
      <label class="control-label" for="focusedInput1">Search</label>
      <input class="form-control" id="focusedInput1" type="text">
    </div>
    <button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
  </div>
</div>

Answer 4

按钮和字段容器应该有“display：inline-block;”：

<div class="page-header">
        <div class="pull-left"  style="float:left;">
                <h2>Header</h2>
        </div>
        <div class="pull-right"  style="float:right;">
                <div class="form-group label-floating" style="display:inline-block;">
                        <label class="control-label" for="focusedInput1">Search</label>
                        <input class="form-control" id="focusedInput1" type="text">
                </div>
                <button style="display:inline-block;" id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
        </div>
        <div class="clearfix" style="clear:both;"></div>
</div>

Answer 5

试试这个fiddle

driver.findElement(By.xpath("your_selector"));

在标题中输入右侧按钮

5 个答案: