Question

我正在尝试将导航栏放在一行中。但是，当窗口小于768px（平板电脑大小）时，我的最后一个图标将被推送到下一行。我怎样才能将它们连成一排？

这是我的JS： https://jsfiddle.net/whywymam/dyreb439/

我的HTML代码：

<div class="container">

              <div class="upperRow">

                   <nav class="navbar-header logoFw">
                       <div class="col-xs-6 col-sm-3 col-md-4 col-lg-6">
                           <a href="home.php" class="brand navbar-brand "> <img src="image/logo.png" class="img-responsive"></a>
                       </div>
                   </nav>

                   <div id="btnTopInline">

                        <ul class= "nav navbar-nav navbar-right hidden-xs">
                                <div class="col-sm-3 col-md-4 col-lg-3">    
                                       <li>
                                         <div class="indivColl">
                                                <a href="signupLogin.php">
                                                   <img src="image/jobseekerlogo.png" class="indi">
                                                   <p class="indit">Job Seeker</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                                <div class="col-sm-3 col-md-4 col-lg-3">
                                       <li>
                                         <div class="empColl">
                                                <a href="signupLoginEmp.php">
                                                   <img src="image/employerlogo.png" class="emp">
                                                   <p class="empt">Employer</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                            <div class="clearfix visible-md-block"></div>

                        </ul>

                   </div><!-- end btnTopInline -->

                    <div class="col-xs-3 col-xs-push-4">
                       <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLogin.php">
                                Job Seeker<br>Log In
                            </a>
                        </button>
                    </div>

                   <div class="col-xs-3 col-xs-push-4">
                        <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLoginEmp.php">
                                Employer<br>Log In
                            </a>
                        </button>
                   </div>

            <div class="clearfix visible-xs-block"></div>

            <div class="clearfix visible-lg-block"></div>

        </div>



        <div class="middleRow">

                <div class="col-sm-12 col-md-12 col-lg-12">

                <nav class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>

                          </div>

                          <div class="nav-collapse collapse-in" id="nav-collapse">

                              <ul class="nav navbar-nav center-block">
                                <li><a href="home.php">Home<img src="image/home.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="about.php">About<img src="image/about.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="pyw.php">Prove Your Worth<img src="image/PYW.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="#">Job<img src="image/jobs.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="rescources.php">Resources<img src="image/resource.png" class="hidden-xs" width="75" height="65" alt="" title="" /></a></li>
                             </ul>

                          </div>


                    </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->

                </div>

            </div> <!-- end middle row -->


  </div><!-- end container -->

Answer 1

您确定要将这些标题与图片内联吗？因为那是什么推动你的项目。如果您只是将标题放在标签之间（例如<h3>Home</h3>等），那么您应该没问题。为了使它们保持内联，无论如何将它们放在标签中，浮动标签（使用float：left或（更好）显示：inline-block）然后给标签一些最大宽度以保持包含的总宽度。

Answer 2

您可以设计两个单独的菜单，一个用于小屏幕尺寸，另一个用于正常的屏幕尺寸使用样式表并添加最大值时，可以轻松完成此操作。尺寸在小屏幕的样式表中，隐藏大菜单，在另一个样式表上执行相反的操作您可以在div中的菜单中更快地隐藏它你可以在adobe dreamweaver上快速设计它希望这有帮助

在水平行中适合导航菜单

2 个答案: