.header-cont
{
width: 100%;
position: fixed;
top: 0px;
}
.header
{
height: 50px;
background: #f0f0f0;
border: 1px solid #ccc;
width: 80%;
margin: 0px auto;
line-height: 0px;
}
.maindiv
{
box-shadow: 15px 0px 10px -11px rgba(0, 0, 0, 0.1), -15px 0px 10px -11px rgba(0, 0, 0, 0.1);
width: 960px;
background: #f0f0f0;
border: 1px solid #ccc;
height: 2000px;
margin: 70px auto;
}
label {
float: left;
width: 15%;
margin-top: .5%;
}
form ul {
list-style-type: none;
margin: 0;
}
form ul li {
clear: both;
margin-top:2%;
}<html>
<body>
<!-- Star Here Top Title Bar -->
<div class="header-cont">
<div class="header">
<form>
<ul>
<li>
<div>
Here is the logo want to b in left corner
<label>
<img src=""> <!-- Logo in left side corner--> `enter code here`
</label>
<div>
<div >
Here is the profile picture i want to b it in center
<label>
<img src=""><!-- Profile Picture in center -->
</label>
</div>
Here is user name wnt to be in right side
<label>
<a href="" id="welcome">Welcome User!!</a><!-- Right Side-->
</label>
Login and sign up want to b in Right corner
<label>
<a href="#">Login</a><!-- Right Side Corner-->
<a href="#">Signup</a>
</label>
</li>
</ul>
</form>
</div>
</div>
<div class="maindiv">
<h1>This is Content Page</h1>
</div>
</body>
</html>Thiz is output of the program, i want to change this header
最佳答案
根据需要更改宽度。
.container{
width:100%;
}
.left {
float:left;
width:33.33%;
text-align: left;
}
.center {
display: inline-block;
margin:0 auto;
width:33.33%;
text-align: center;
}
.right {
float:right;
width:33.33%;
text-align: right;
}<div class="container">
<div class="left"><!-- left contents --> </div>
<div class="center"><!-- center contents --> </div>
<div class="right"><!-- right contents --> </div>
</div>关于html - 如何在标题的右，左和中心对齐div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28452230/