嗨，这是我的网站链接，该菜单显示徽标的底部。但我想显示徽标底部的右侧。这是我想要更改它的示例代码。
预期产出：
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 © 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 :(得分：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 © 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>
答案 1 :(得分：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>
答案 2 :(得分：0)
更改DIV demo
.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>