서로 요소 정렬

다음 코드에서는 다음과 같이 그림을 렌더링합니다. enter image description here 원하는 효과는 "Hello, user1"이 블랙 박스와 정렬되어 있고 둘 다 오른쪽에 정렬되어 있다는 것입니다 회색 상자에서 어떻게해야합니까?서로 요소 정렬

<html> 
<head> 
<style> 
    #header { 
    width: 100%; 
    height: 81px; 
    background: url(http://www5.picturepush.com/photo/a/12541848/img/Anonymous/header-bg.png) 0 0 repeat-x; 
} 
#header h1 { 
    display: block; 
    float: left; 
    margin: 30px 0 0 35px; 
    font-size: 18px; 
    color: #6a6a6a; 
} 
#header #logo { 
    display: block; 
    float: left; 
} 
#header #userlog { 
    width: 272px; 
    height: 31px; 
    background-color: #363636; 
    border-radius: 2px; 
    float: right; 
    margin: 27px 26px 0 0; 
}#header #userlog a { 
    font-size: 13px; 
    float: left; 
    color: #b7b7b7; 
    margin-top: 6px; 
} 

#welcome_msg { 
    color: #b7b7b7; 
    float: right; 

} 
    </style> 

</head> 
<body> 
<div id="header"> 
    <a id="logo" href="dashboard.php"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/c/c1/20070624012131!Fuji_apple.jpg/120px-Fuji_apple.jpg" alt="" /></a> 
    <div class="welcome_msg" id="welcome_msg">hello, user1</div> 
    <h1> My Portal </h1> 
    <div id="userlog"> 
     <a href="#" style="margin-left:25px;text-decoration:underline;">Contact Support</a> 
     <a href="#" style="margin-left:20px;">FAQ</a> 
     <a href="../index.php" style="margin-left:25px;">logout</a> 
    </div> 
</div> 
</body> 
</html>

출처

2013-03-30 william007

이렇게하면?

enter image description here

나는 #userlog 및 #welcome_msg을 유지하기 위해 <div> 컨테이너를 추가했다.

CSS

#header #userlog { 
    margin: 0 26px 0 0; 
} 
#welcome_msg { 
    margin-right:26px; 
}

HTML

<div id="container"> 
    <div class="welcome_msg" id="welcome_msg">hello, user1</div> 
    <br /> 
    <div id="userlog"> 
     <a href="#" style="margin-left:25px;text-decoration:underline;">Contact Support</a> 
     <a href="#" style="margin-left:20px;">FAQ</a> 
     <a href="../index.php" style="margin-left:25px;">logout</a> 
    </div> 
</div>

출처

2013-03-30 06:02:14

사업부에 두 요소를 넣고 맞아 div에 떠. 오른쪽의 추가 공간은 요소의 최대 여백이 26 픽셀이기 때문입니다.

<div id="whatever"> 
    <div class="welcome_msg" id="welcome_msg">hello, user1</div> 
    <div id="userlog"> <a href="#" style="margin-left:25px;text-decoration:underline;">Contact Support</a> 
     <a href="#" style="margin-left:20px;">FAQ</a> 
     <a href="../index.php" style="margin-left:25px;">logout</a> 
    </div> 
</div> 


#whatever { 
    float:right; 
} 

#header #userlog { 
    width: 272px; 
    height: 31px; 
    background-color: #363636; 
    border-radius: 2px; 
}

데모 : http://jsfiddle.net/kzhuL/

출처

2013-03-30 06:02:36 JJJ

서로 요소 정렬

답변

관련 문제