2015-07-10 102 views
0

嗨,这是我的网站链接,在该菜单显示logo.but的底部,但我想显示右侧的徽标底部。这是我想要改变它的示例代码。菜单不移动在html顶部

预期输出:

logo     menus 

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Olisvell | Home </title> 
    <!--fonts--> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 
    <!--//fonts--> 
      <link href="css/bootstrap.css" rel="stylesheet"> 
      <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
    <!-- for-mobile-apps --> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="keywords" content="Wilcox Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
     Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> 
     <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
    <!-- //for-mobile-apps --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
<!-- header --> 
<div class="header"> 
    <div class="container"> 
     <div class="logo"> 
      <a href="index.html"><img src="images/logo.gif" alt=""/></a> 
     </div> 

     <div class="header-right"> 
      <ul> 
     <li>Welcome Guest</li> 
     <li>Free Register</li> 
     <li>Login</li> 
    </ul> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<!-- //header --> 
<!-- navigation --> 
<div class="navigation"> 
    <div class="container"> 
     <nav class="navbar navbar-default"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
       <li><a href="index.html">About Us</a></li> 
       <li><a href="index.html">Services</a></li> 
       <li><a href="index.html">Treatments</a></li> 


       <li><a href="index.html">Partners</a></li> 
       <li><a href="index.html">Visa Help</a></li> 
       <li><a href="index.html">FAQ</a></li> 
       <li><a href="index.html">Contact Us</a></li> 
       </ul> 

       <div class="clearfix"></div> 
      </div><!-- /.navbar-collapse --> 
     </nav> 
    </div> 
</div> 
<!-- //navigation --> 
<!-- banner --> 
<div class="banner"> 
    <div class="container"> 
<!-- responsiveslides --> 
        <script src="js/responsiveslides.min.js"></script> 
         <script> 
          // You can also use "$(window).load(function() {" 
          $(function() { 
          // Slideshow 4 
          $("#slider3").responsiveSlides({ 
           auto: true, 
           pager: false, 
           nav: true, 
           speed: 500, 
           namespace: "callbacks", 
           before: function() { 
          $('.events').append("<li>before event fired.</li>"); 
          }, 
          after: function() { 
           $('.events').append("<li>after event fired.</li>"); 
           } 
           }); 
           }); 
         </script> 
      <!-- responsiveslides --> 
     <div id="top" class="callbacks_container"> 
        <ul class="rslides" id="slider3"> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
     </div> 
    </div> 
</div> 
<!-- //banner --> 
<!-- banner-bottom --> 
<div class="bann-bot"> 
    <div class="container"> 
    <div class="news"> 
       <div class="news-left"> 
       <h1>Welcome to Olisvell</h1> 
        <p>ACROSS THE WORLD THE COST OF HEALTHCARE HAS ROCKETED AND THERE HAS BEEN A GREATER NEEED FOR FINDING AFFORDABLE AND TOP QUALITY HEALTHCARE. THIS IS A PHENOMENA THAT IS SPREADING ACROSS THE WORLD AND INDIA HAS BEEN GEARING UP FOR THIS IN THE LAST DECADE. INDIA IS NOW AN ESTABLISHED ENTITY IN MEDICAL TOURISM AND THE WORLD IS LOOKING AT IT FROM ALL SIDES. 
WE AT OLISWELL, LOOK FORWAD TO HELP DIRECT YOUR HEALTH PROBLEMS TO THE BEST DOCTORS AVAILABLE IN BANGALORE, INDIA, THE MECCA OF MEDICAL TOURISM IN INDIA. WITH THE BEST WEATHER, CONNECTIVITY AND SURROUNDED BY TOURIST SPOTS AND THE ADDED TOP HEALTH INSTITITUES, IT REMAINS THE CHOICE OF DESTINATIONS FOR MEDICAL TOURISM. WE AT ALISWELL WILLMAKE SURE YOU CARRY THE BEST OF FEELINGS WHEN YOU LEAVE AFTER YOUR TREATMENTS.</p> 
       </div> 

       <div class="clearfix"></div> 
      </div> 
     <div class="banner-info-second"> 
      <div class="row bann-col"> 
       <div class="col-md-4 banner-grid"> 
        <i></i><h2>Solutions Made Easy</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <span></span><h2>We Listen To You</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <label></label><h2>Monitoring your Output</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 

      </div> 

     </div> 

    </div> 
</div> 
<!-- //banner-bottom --> 
<!-- news-bottom --> 
<!-- 
<div class="news-bottom"> 
    <div class="container"> 
     <div class="news-pad"> 
      <div class="row news-bot"> 
       <div class="col-md-3 news-grid"> 
        <h3>Pages</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>   
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Main Menu</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Latest News & Events</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Blog Posts</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
      </div> 
     </div> 
    </div> 
</div>--> 
<!-- //news-bottom --> 
<!-- footer --> 
<div class="footer"> 
    <div class="container"> 
     <p>Copyright &copy; 2015 OLISVELL, Inc.</p> 
    </div> 
</div> 
<!-- footer --> 
<!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <!-- js --> 
     <script src="js/bootstrap.js"></script> 
    <!-- js --> 
</body> 
</html> 
+0

请你尝试什么一个小例子,什么你期望的结果是。也不要发布链接到代码,发布相关代码的问题。 – firelynx

+0

看到我更新的帖子 – care567

回答

1

更改您的HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Olisvell | Home </title> 
    <!--fonts--> 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> 
    <!--//fonts--> 
      <link href="css/bootstrap.css" rel="stylesheet"> 
      <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 
    <!-- for-mobile-apps --> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="keywords" content="Wilcox Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
     Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> 
     <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
    <!-- //for-mobile-apps --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
<!-- header --> 
<div class="header"> 
    <div class="container"> 


     <div class="header-right"> 
      <ul> 
     <li>Welcome Guest</li> 
     <li>Free Register</li> 
     <li>Login</li> 
    </ul> 
     </div> 
<div class="logo"> 
      <a href="index.html"><img src="images/logo.gif" alt=""/></a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a></li> 
       <li><a href="index.html">About Us</a></li> 
       <li><a href="index.html">Services</a></li> 
       <li><a href="index.html">Treatments</a></li> 


       <li><a href="index.html">Partners</a></li> 
       <li><a href="index.html">Visa Help</a></li> 
       <li><a href="index.html">FAQ</a></li> 
       <li><a href="index.html">Contact Us</a></li> 
       </ul> 

       <div class="clearfix"></div> 
      </div><!-- /.navbar-collapse --> 
     <div class="clearfix"></div> 
    </div> 
</div> 
<!-- //header --> 
<!-- navigation --> 
<div class="navigation"> 
    <div class="container"> 
     <nav class="navbar navbar-default"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 


     </nav> 
    </div> 
</div> 
<!-- //navigation --> 
<!-- banner --> 
<div class="banner"> 
    <div class="container"> 
<!-- responsiveslides --> 
        <script src="js/responsiveslides.min.js"></script> 
         <script> 
          // You can also use "$(window).load(function() {" 
          $(function() { 
          // Slideshow 4 
          $("#slider3").responsiveSlides({ 
           auto: true, 
           pager: false, 
           nav: true, 
           speed: 500, 
           namespace: "callbacks", 
           before: function() { 
          $('.events').append("<li>before event fired.</li>"); 
          }, 
          after: function() { 
           $('.events').append("<li>after event fired.</li>"); 
           } 
           }); 
           }); 
         </script> 
      <!-- responsiveslides --> 
     <div id="top" class="callbacks_container"> 
        <ul class="rslides" id="slider3"> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top second1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
         <li> 
          <div class="banner-info"> 
           <div class="bann-top1"> 

            <div class="clearfix"></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
     </div> 
    </div> 
</div> 
<!-- //banner --> 
<!-- banner-bottom --> 
<div class="bann-bot"> 
    <div class="container"> 
    <div class="news"> 
       <div class="news-left"> 
       <h1>Welcome to Olisvell</h1> 
        <p>ACROSS THE WORLD THE COST OF HEALTHCARE HAS ROCKETED AND THERE HAS BEEN A GREATER NEEED FOR FINDING AFFORDABLE AND TOP QUALITY HEALTHCARE. THIS IS A PHENOMENA THAT IS SPREADING ACROSS THE WORLD AND INDIA HAS BEEN GEARING UP FOR THIS IN THE LAST DECADE. INDIA IS NOW AN ESTABLISHED ENTITY IN MEDICAL TOURISM AND THE WORLD IS LOOKING AT IT FROM ALL SIDES. 
WE AT OLISWELL, LOOK FORWAD TO HELP DIRECT YOUR HEALTH PROBLEMS TO THE BEST DOCTORS AVAILABLE IN BANGALORE, INDIA, THE MECCA OF MEDICAL TOURISM IN INDIA. WITH THE BEST WEATHER, CONNECTIVITY AND SURROUNDED BY TOURIST SPOTS AND THE ADDED TOP HEALTH INSTITITUES, IT REMAINS THE CHOICE OF DESTINATIONS FOR MEDICAL TOURISM. WE AT ALISWELL WILLMAKE SURE YOU CARRY THE BEST OF FEELINGS WHEN YOU LEAVE AFTER YOUR TREATMENTS.</p> 
       </div> 

       <div class="clearfix"></div> 
      </div> 
     <div class="banner-info-second"> 
      <div class="row bann-col"> 
       <div class="col-md-4 banner-grid"> 
        <i></i><h2>Solutions Made Easy</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <span></span><h2>We Listen To You</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 
       <div class="col-md-4 banner-grid"> 
        <label></label><h2>Monitoring your Output</h2> 
         <div class="clearfix"></div> 
        <p>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat 
         mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci.</p> 
        <p><a class="btn btn-default" href="#" role="button">Read More</a></p> 
       </div> 

      </div> 

     </div> 

    </div> 
</div> 
<!-- //banner-bottom --> 
<!-- news-bottom --> 
<!-- 
<div class="news-bottom"> 
    <div class="container"> 
     <div class="news-pad"> 
      <div class="row news-bot"> 
       <div class="col-md-3 news-grid"> 
        <h3>Pages</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>   
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Main Menu</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Latest News & Events</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
       <div class="col-md-3 news-grid"> 
        <h3>Blog Posts</h3> 
        <ul> 
         <li><a href="#">Suspendisse Vulputate </a></li> 
         <li><a href="#">Fringilla Arcu et Porttitor</a></li> 
         <li><a href="#">Mauris Placerat Mattis </a></li> 
         <li><a href="#">Tellus id Sodales </a></li> 
         <li><a href="#">Magnust Qisit</a></li> 
        </ul>        
       </div> 
      </div> 
     </div> 
    </div> 
</div>--> 
<!-- //news-bottom --> 
<!-- footer --> 
<div class="footer"> 
    <div class="container"> 
     <p>Copyright &copy; 2015 OLISVELL, Inc.</p> 
    </div> 
</div> 
<!-- footer --> 
<!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <!-- js --> 
     <script src="js/bootstrap.js"></script> 
    <!-- js --> 
</body> 
</html> 
0

这取决于你如何要对齐,但这里有一个例子:

.logo, 
 
.header-right { 
 
    float: left; 
 
} 
 
.header-right li { 
 
    float: left; 
 
    margin-left: 16px; 
 
    list-style: none; 
 
} 
 
.clearfix::after { 
 
    content: ''; 
 
    display: table; 
 
    clear: both; 
 
}
<div class="header"> 
 
    <div class="container"> 
 
    <div class="logo"> 
 
     <a href="index.html"> 
 
     <img src="//lorempicsum.com/futurama/350/200/2" alt="" /> 
 
     </a> 
 
    </div> 
 

 
    <div class="header-right clearfix"> 
 
     <ul> 
 
     <li>Welcome Guest</li> 
 
     <li>Free Register</li> 
 
     <li class="clearfix">Login</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

0

更改DIVdemo

.container{ 
    height:150px; 
    width:100%; 
    background-color:green; 
} 
.logo{ 
    float:left; 
    width:20%; 
    height:100%; 
    background-color:blue; 
} 
.header-right{ 
    float:right; 
    width:80%; 
    height:100%; 
    background-color:yellow; 
} 
.header-right-top{ 
    width:100%; 
    height:80%; 
    background-color:pink; 
} 
.header-right-top{ 
    width:100%; 
    height:20%; 
    background-color:gray; 
} 

.header-right ul { 
    float: right; 

} 
.header-right ul li { 
    display: inline-block; 

} 

<div class="container"> 
    <div class="logo"> 
     <a href="index.html">LOGO</a> 
     </div> 
    <div class="header-right"> 
     <div class="header-right-top"> 
      <ul> 
       <li>Welcome Guest</li> 
       <li>Free Register</li> 
       <li>Login</li> 
      </ul> 
     </div> 
     <div class="header-right-bottom"> 
      YOUR NAV MENU 
     </div> 
    </div> 
</div>