Question

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Articles List</title>
    <?= link_tag('assets/css/bootstrap.min.css')?>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Articles</a>


  <div class="collapse navbar-collapse" id="navbarColor01">

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      <button class="btn btn-secondary ml-2 my-sm-0" type="submit">Login</button>

    </form>
  </div>
</nav>



</body>
</html>

我想将登录按钮放在导航栏的右侧，但是无法向右拉，向右浮动，导航栏右侧无法正常工作

Answer 1

你的表格不是那么广泛。请将 display：block 添加到 .form-inline 并向右拉到按钮

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Articles List</title>
    <?= link_tag('assets/css/bootstrap.min.css')?>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Articles</a>

  <div class="collapse navbar-collapse" id="navbarColor01">

    <form class="form-inline my-2 my-lg-0" style="width: 100%">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      <button class="btn btn-secondary ml-2 my-sm-0 pull-right" type="submit">Login</button>

    </form>
  </div>
</nav>
</body>
</html>

Answer 2

我在登录按钮中添加了class login，并在CSS添加了position:relative;和float:right;。

试试这个：

.login
{
   position:relative;
   float:right;
}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Articles List</title>
    <?= link_tag('assets/css/bootstrap.min.css')?>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Articles</a>


  <div class="collapse navbar-collapse" id="navbarColor01">

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      <button class="btn btn-secondary ml-2 my-sm-0 login" type="submit">Login</button>

    </form>
  </div>
</nav>



</body>
</html>

Answer 3

＆＃13;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Articles List</title>
    <?= link_tag('assets/css/bootstrap.min.css')?>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Articles</a>


  <div class="collapse navbar-collapse" id="navbarColor01">

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
      <button class="btn btn-secondary ml-2 my-sm-0" style="float: right" type="submit">Login</button>

    </form>
  </div>
</nav>



</body>
</html>

＆＃13;

无法在导航栏的右侧放置登录按钮

3 个答案: