css float: правый и вертикальный выровнять?

Я экспериментирую с html и css и пытаюсь понять, как это сделать ... Я просто пытаюсь сделать float #menu справа от h1, но быть на том же базовом уровне, что и ... но, очевидно, float: right заставляет его плавать вправо-вверх? любой способ заставить его плавать в нижнем правом углу или выровнять его с нижней частью содержащего 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 структуры, вы можете просто добавить верхний край к вашему DIV меню

#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; 
}

Вертикальное выравнивание по умолчанию установлено в центр, поэтому вам не нужно его устанавливать.
Или, если вы не хотите использовать таблицу, вы можете просто установить padding-top: 10px; в #menu ul.

источник

2010-07-27 17:53:10 tomasbelusky

Я думаю, что использовать таблицы проще, но я просто пытаясь понять, как это сделать без таблиц и без определенного значения смещения XXpx ... я думаю, я должен был бы с ума сойти с ума ... но спасибо –

Его вертикальный выровнять: средний; не центр. –

Использование HTML-таблиц для выравнивания элементов сильно обескуражено, а именно потому, что теперь существуют лучшие решения (например, flexboxes) и не является хорошим семантическим использованием тега. – ElementW

css float: правый и вертикальный выровнять?

ответ

Смежные вопросы