如何對齊在頭右側的股利，左邊和中間

.header-cont 
 
{ 
 
\t width: 100%; 
 
\t position: fixed; 
 
\t top: 0px; 
 
} 
 
.header 
 
{ 
 
\t height: 50px; 
 
\t background: #f0f0f0; 
 
\t border: 1px solid #ccc; 
 
\t width: 80%; 
 
\t margin: 0px auto; 
 
\t line-height: 0px; 
 

 
} 
 
.maindiv 
 
{ 
 
\t box-shadow: 15px 0px 10px -11px rgba(0, 0, 0, 0.1), -15px 0px 10px -11px rgba(0, 0, 0, 0.1); 
 
\t width: 960px; 
 
\t background: #f0f0f0; 
 
\t border: 1px solid #ccc; 
 
\t height: 2000px; 
 
\t margin: 70px auto; 
 
\t 
 
} 
 
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

來源

2015-02-11 Jerome Arockiam

你能解釋一下右邊和右上角之間的區別？你的意思是右上角嗎？ – Giorgio 2015-02-11 10:51:24

根據您的需要更改寬度。

.container{ 
 
     width:100%; 
 
    } 
 

 
    .left { 
 
    \t float:left; 
 
     width:33.33%; 
 
    \t text-align: left; 
 
    \t 
 
    } 
 
    .center { 
 
    \t display: inline-block; 
 
     margin:0 auto; 
 
     width:33.33%; 
 
     text-align: center; 
 
    } 
 

 
    .right { 
 
    \t float:right; 
 
     width:33.33%; 
 
    \t 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>

來源

2015-02-11 12:26:23

取3 <div>給他們的ID和width:33.33%;給float:left;

第一DIV把你的標誌內，第二次放置個人資料照片，第三次再拍兩張<div>各width:50%;，歡迎用戶設置text-align:left;和用於登錄和註冊集text-align:right;

來源

2015-02-11 10:50:39

如何對齊在頭右​​側的股利，左邊和中間

回答

相關問題

如何對齊在頭右側的股利，左邊和中間