css float : 오른쪽 및 세로 맞춤?

나는 html과 css를 실험 중이며이 작업을 만드는 방법을 알아 내려고 노력하고 있습니다 ... #menu 플로트를 h1의 오른쪽으로 만들려고하지만 같은 기준선에있게하려고합니다 ...하지만 분명히 부유물 : 오른쪽 위가 오른쪽 위로 튀어 나옵니까? 어떤 식 으로든 오른쪽 아래로 뜨거나 div의 아래쪽에 정렬 할 수 있습니까? 여기 css float : 오른쪽 및 세로 맞춤?

는 HTML입니다 :

<!doctype html> 
<html> 
    <head> 
     <title>Website.com</title> 
     <link rel="Stylesheet" href="style.css" type="text/css" /> 
    </head> 
    <body> 
     <div> 
      <h1><a href="#" title="Website.com">Website.com</a></h1> 
      <div id="menu"> 
       <ul> 
        <li><a href="#" title="Home">Home</a></li> 
        <li><a href="#" title="Link1 Description">Link1</a></li> 
        <li><a href="#" title="Link2 Description">Link2</a></li> 
        <li><a href="#" title="Link3 Description">Link3</a></li> 
        <li><a href="#" title="About Website.com">About</a></li> 
       </ul> 
      </div> 
     </div> 
     <hr /> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p> 
     <p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p> 
     <p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p> 
     <hr /> 
     <p id="footer">Use of this site constitutes acceptance of our <a href="#">User Agreement</a> and <a href="#">Privacy Policy</a>. &copy; 2010 Website.com. All rights reserved.</p> 
    </body> 
</html>

여기에 CSS입니다 :

여기

body 
{ 
    font-family: verdana, sans-serif; 
    min-width: 800px; 
} 

h1 
{ 
    display: inline; 
    font-variant: small-caps 
} 

h1 a 
{ 
    color: #090; 
    text-decoration: none; 
} 

h1 a:hover 
{ 
    color: #0A0; 
} 

#menu 
{ 
    float: right; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    font-variant: small-caps; 
} 

#menu ul 
{ 
    margin: 0; 
    padding-left: 0; 
    float: left; 
    font-weight: bold; 
} 

#menu ul li 
{ 
    float: left; 
    display: inline; 
} 

#menu ul li a 
{ 
    color: #090; 
    background-color: #F3F3F3; 
    padding: 2px 6px 4px 6px; 
    text-decoration: none; 
} 

#menu ul li a:hover 
{ 
    font-weight: bolder; 
    color: #0A0; 
    background-color: #F3F3F3; 
    border-bottom: 4px solid #0A0; 
    padding-bottom: 0; 
} 

#footer 
{ 
    text-align: center; 
    font-size: x-small; 
}

이 무엇을하는 지금과 같습니다 도움을 Website.com

감사합니다!

출처

2010-07-27 Rakka Rage

메뉴의 DIV에 위쪽 여백을 추가 할 수 있지만이 포함 된 사업부의 position: relative을 설정하면, 당신은 단지 ulposition: absolute; bottom: 0; right: 0을 할 수 있으며, 당신이 원하는 곳으로 가야합니다.

예 :

div {position: relative} 
ul {position: absolute; bottom: 0; right: 0} 
li {float: left; list-style: none}

당신은 테이블을 사용할 수 있습니다

<div> 
    <h1>Header</h1> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Etc...</li> 
    </ul> 
</div>

출처

2010-07-27 17:41:26

플로트하고 싶다면'right : 0'이 필요하지 않습니다 ... –

이것은 페이지 하단에 넣은 것 같습니까? 포함하는 요소 (div)의 맨 아래에만 놓아야합니다. 감사합니다 –

http://www.jsfiddle.net/7sjkh/ ... 확실합니까? –

오른쪽 아래 또는 오른쪽 상단에 떠 다니는 속성이 없습니다. 하지만 당신의 HTML 구조를 변경하지 않고 그냥 내가 많은이에보고하지 않은

#menu { 
    .... 
    margin-top:20px; 
}

출처

2010-07-27 17:39:18 naikus

이 작품은 간단합니다 ... 왼쪽에있는 텍스트의 크기를 변경하면 왼쪽에있는 픽셀을 변경해야합니다 ... 나는 (이 div의) 기준선을 가지고 있습니다. 그것은 이미 앉아 있지만 그것을 사용할 수 없어? –

-2

 
<table id="title"> 
    <tr> 
    <td> 
     <h1><a href="#" title="Website.com">Website.com</a></h1> 
    </td> 
    <td> 
     <div id="menu"> 
      <ul> 
       <li><a href="#" title="Home">Home</a></li> 
       <li><a href="#" title="Link1 Description">Link1</a></li> 
       <li><a href="#" title="Link2 Description">Link2</a></li> 
       <li><a href="#" title="Link3 Description">Link3</a></li> 
       <li><a href="#" title="About Website.com">About</a></li> 
      </ul> 
     </div> 
    </td> 
    </tr> 
</table>

을 그리고 당신의 CSS 파일에 이것을 추가 :

 
#title 
{ 
    width:100%; 
} 

#title td+td 
{ 
    text-align:right; 
    vertical-align:center; 
}

수직 정렬은 기본값으로 center로 설정되어 있으므로 설정할 필요가 없습니다.
테이블을 사용하지 않으려면 padding-top : 10px를 설정할 수 있습니다. # 메뉴 ul.

출처

2010-07-27 17:53:10 tomasbelusky

표를 사용하는 것이 더 쉬울 것이라고 생각하지만 나는 단지 테이블없이 그리고 특정 XXpx 오프셋 값없이 그것을하는 방법을 알아 내려고 노력 ... 내가 그 화가해야 겠군 분명 ...하지만 감사 –

그 수직 정렬 : 중간; 센터가 아닙니다. –

HTML 테이블을 사용하여 요소를 정렬하는 것은 매우 바람직하지 않습니다. 즉, 이제는 더 나은 솔루션 (예 : 플렉스 박스)이 있으며 태그의 의미 론적 의미가 적절하지 않기 때문입니다. – ElementW

css float : 오른쪽 및 세로 맞춤?

답변

관련 문제