Question

我在酒吧的左侧有一个icon，在右侧我有一个input和其他一些图标。 input太靠近右侧，图标应与input位于同一行。

我该怎么办？

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>
  <div class="w3-container">
    <ul class="w3-ul">
      <li class="w3-xxxlarge w3-blue">
        <i class="glyphicon glyphicon-home"></i>&nbsp;Home
        <div class="w3-large" style="float: right;">
          <input class="w3-input w3-border" name="searchbox" type="text">
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

Answer 1

编辑（根据评论）：

切换到.w3-ul以弯曲并放置input＆amp;另一个icon上的li。
在justify-content: space-between;上设置.w3-ul以获取输入＆amp; icon right alignment。
从float: right;移除.w3-large。

＆＃13;

ul.w3-ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="w3-container">
  <ul class="w3-ul">
    <li class="w3-xxxlarge w3-blue"><i class="glyphicon glyphicon-home"></i> Home
    </li>
    <li class="w3-large">
      <input class="w3-input w3-border" name="searchbox" type="text">
      <i class="glyphicon glyphicon-home"></i>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

你想这样吗？

如果是，那么

<div class="w3-container">
  <ul class="w3-ul">
    <li class="w3-xxxlarge w3-blue"><i class="glyphicon glyphicon-home"></i>&nbsp;Home
      <div class="w3-large" style="float: right;">
        <i class="glyphicon glyphicon-home" style="font-size: 40px;"></i>
        <i class="glyphicon glyphicon-home" style="font-size: 40px;"></i>
        <i class="glyphicon glyphicon-home" style="font-size: 40px;"></i>
        <i class="glyphicon glyphicon-home" style="font-size: 40px;"></i>
      </div>
      <div class="w3-large" style="float: right;">
        <input class="w3-input w3-border" name="searchbox" type="text">
      </div>
    </li>
  </ul>
</div>

Answer 3

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>

<div class="w3-container">

  <ul class="w3-ul">
    <li class="w3-xxxlarge w3-blue">
        <i class="glyphicon glyphicon-home"></i>&nbsp;Home


    <span class="w3-large pull-right" >
      <input class="w3-input w3-border" name="searchbox" type="text">
      <span class="w3-xxxlarge w3-blue">
        <i class="glyphicon glyphicon-search"></i>
      </span>
    </span>


    </li>
  </ul>


</div>

</body>
</html>

如何在标题栏的右侧放置带有一些图标的输入框

3 个答案: