0

我正在这个站点上使用 html，但我无法将登录元素拉到顶行。我知道我不是很有描述性，有点我只是不知道我错了什么。我已经尝试了该站点上的各种示例，但它们对我不起作用。随意使用 google chrome 开发者工具来玩 html 和 css。这是代码：

        <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
         <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-   =".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">St. Augustine School</a>
    </div>
    <div class="navbar-collapse collapse">
        <nav class="collapse navbar-collapse bs-navbar-collapse" style="text-align:center;" role="navigation">

<ul class="nav navbar-nav nav-right">
    <li class="active">
      <a href="./getting-started">Home</a>
    </li>
    <li>
      <a href="./css">CSS</a>
    </li>
    <li>
      <a href="./components">Components</a>
    </li>
    <li>
      <a href="./javascript">JavaScript</a>
    </li>
  </ul>

    </nav>
          <form class="navbar-form nav-center" method="post" action="/prossing.php">
    <div class="form-group">
              <input type="text" placeholder="Username" class="form-control" name = "username">
        <input type="hidden" name="action" value="signIn" />
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control"     name="password">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

<body>
</html>

是的，这只是网站的一部分，但这是导航栏代码。

4

5 回答 5

1

用于float:left菜单和float:right登录面板，代码如下：

<nav class="collapse navbar-collapse bs-navbar-collapse" style="
text-align:center;
float: left;
" role="navigation">
...
<form class="navbar-form nav-center" method="post" action="/prossing.php" 
style="float: right;">

在此处输入图像描述

于 2013-11-06T13:02:32.683 回答
0

如果您使用的是 twitter bootstrap，我建议您使用 bootstrap 的解决方案：

<nav class="collapse navbar-collapse bs-navbar-collapse pull-left" style="text-align:center;" role="navigation">

<ul class="nav navbar-nav nav-right">
    <li class="active">
      <a href="./getting-started">Home</a>
    </li>
    <li>
      <a href="./css">CSS</a>
    </li>
    <li>
      <a href="./components">Components</a>
    </li>
    <li>
      <a href="./javascript">JavaScript</a>
    </li>
  </ul>

</nav>

<form class="navbar-form nav-center pull-right" method="post" action="/prossing.php">
    <div class="form-group">
          <input type="text" placeholder="Username" class="form-control" name="username">
    <input type="hidden" name="action" value="signIn">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control" name="password">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>

所以基本上你必须首先在导航标签中添加两个类，添加“pull-left”类，然后在“form”标签中添加“pull-right”类。

于 2013-11-06T13:05:10.557 回答
0

更改<form class="navbar-form nav-center" method="post" action="/prossing.php"> 为 <form class="navbar-form navbar-right" method="post" action="/prossing.php">

并把它放在导航栏中，像这样；

<nav class="collapse navbar-collapse bs-navbar-collapse" style="text-align:center;" role="navigation">

<form class="navbar-form navbar-right" method="post" action="/prossing.php">
    <div class="form-group">
      <input type="text" placeholder="Username" class="form-control" name="username">
        <input type="hidden" name="action" value="signIn">
    </div>
    <div class="form-group">
      <input type="password" placeholder="Password" class="form-control" name="password">
    </div>
    <button type="submit" class="btn btn-success">Sign in</button>
</form><ul class="nav navbar-nav nav-right"></nav>
于 2013-11-06T13:12:47.510 回答
0

请尝试以下代码，这是小提琴

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>

    <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>          
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</div>
于 2013-11-06T13:09:17.327 回答
0

首先，听从 Drixson 的建议，确保所有标签都正确关闭。

然后，我建议您将登录元素和导航栏放在同一个容器中，每个容器都有一个包装器（导航栏向左浮动，登录表单向右浮动）。

于 2013-11-06T13:02:44.257 回答