某些网页链接不起作用

Question

您好正在使用Twitter-Bootstrap框架为客户开发网站，但是我碰壁了，我不知道是什么原因造成的。 在继续之前，我将抛出html和CSS代码，然后解释问题。

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'); body { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } a { text-decoration: none; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } /* TOP OF THE PAGE */ #header { float: left; width: 100%; position: relative; z-index: 999; } .topbar-section { float: left; width: 100%; background: #f5f5f5; border-bottom: 1px solid #ccc; } .top-social { float: left; width: 100%; } .top-social a { font-size: 14px; color: #777; line-height: 50px; } .top-social ul { padding: 0; margin: 0; list-style: none; } .top-social ul li { float: left; padding: 0; width: 50px; border-left: 1px solid #ccc; } .top-social ul li.last { border-right: 1px solid #ccc; } .top-social ul li a { text-align: center; display: block; text-decoration: none; } .top-social a.email { font-weight: 400; float: left; padding: 0 0 0 20px; text-decoration: none; } .logo-section { float: left; width: 100%; } strong.logo { float: left; margin: 0; padding: 20px 30px 20px 0; } strong.logo a { font-size: 18px; text-transform: uppercase; } .book-section { float: right; width: 100%; padding: 15px 0; } .number-box { float: left; padding: 0 30px 0 0; } .number-box span { color: #777; display: block; padding: 0; } .number-box strong { font-size: 24px; font-weight: 700; color: #222; display: block; } div.btn-book-box { padding: 10px 0 0; } div.btn-book-box a.btn-book { padding: 10px 15px; font-size: 18px; text-transform: uppercase; text-decoration: none; color: #fff; background-color: #9bc83c; } div.btn-book-box a.btn-book:hover { background: none; border: 1px solid #444; color: #222; } /*.navigation*/ .navbar { border-radius: 0; } /*.navigation */.navbar-inverse { background-color: transparent; border-color: transparent; } /*.navigation */.navbar-inverse .navbar-collapse { border-color: #ccc; } .nav-outer { background: #fff; border: 1px solid #999; float: left; width: 100%; -moz-box-shadow: 0 0 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1); box-shadow: 0 0 4px rgba(0,0,0,0.1); } 

 <div id="header"> <div class="topbar-section"> <div class="container"> <div class="col-md-6"> <div class="top-social"> <ul> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li class="last"><a href="#"><i class="fa fa-facebook-f"></i></a></li> </ul> <a href="mailto:" class="email" title="Send us an email"> <i class="fa fa-envelope-o"></i> info@prideafricasafaris.com</a> </div> </div> </div> </div> <div class="logo-section"> <div class="container"> <div class="col-md-6"> <strong class="logo"><a href="#">Pride Africa Safaris</a> </strong> </div> <div class="col-md-6"> <div class="book-section"> <div class="number-box"> <div class="number-text"> <span>Call us for any Query</span> <strong><i class="fa fa-phone"></i> +256 7** 5** 6**</strong> </div> </div> <div class="btn-book-box"> <a href="#" class="btn-book">Book Now</a> </div> </div> </div> </div> </div> <div class="navigation"> <div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <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-outer"> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Team</a></li> <li><a href="#">Trips</a></li> <li><a href="#">Events</a></li> <li><a href="#">Booking</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

从现在开始，您已经看到了我的代码，问题是当我将div包含在类导航中时，top-social和logo-section div中的链接保持静态且不起作用，但是当我使用类导航删除div时，一切似乎都正常工作，这可能是什么问题？ 提前致谢。

Answer 1

为什么要浮动所有部分？ 他们现在彼此漂浮。

从topbar-section div， top-social div和logo-section div中删除float属性，然后将再次单击元素。

topbar-section示例：

.topbar-section {
    float: left; <<-- REMOVE THIS
    width: 100%; <<-- REMOVE THIS TOO
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
}

链接到jsFiddle： https ://jsfiddle.net/AndrewL32/d9rpvkpg/3/

---

另外，我注意到您也在小提琴中的某些其他元素上使用了float 。 删除它们并仅保留必要的那些。

请阅读以下内容： https : //developer.mozilla.org/zh-CN/docs/Web/CSS/float以了解float的工作原理。

Answer 2

采取

float: left;

.topbar部分之外

为什么父元素具有float：left？