Html css浮动：右对齐和垂直对齐？_Html_Css

Html css浮动：右对齐和垂直对齐？

html css

Html css浮动：右对齐和垂直对齐？,html,css,Html,Css,我正在试验html和css，并试图找出如何使这项工作。。。我只是想让#菜单浮动到h1的右侧，但在同一基线上，所以。。。但很明显，浮动：右侧使其浮动到右上方？有什么方法可以使它浮动到右下角或与包含div的底部对齐以下是html： <!doctype html> <html> <head> <title>Website.com</title> <link rel="Stylesheet" hr

我正在试验html和css，并试图找出如何使这项工作。。。我只是想让#菜单浮动到h1的右侧，但在同一基线上，所以。。。但很明显，浮动：右侧使其浮动到右上方？有什么方法可以使它浮动到右下角或与包含div的底部对齐

以下是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>

下面是is现在的样子：

谢谢你的帮助

没有属性将其浮动到右下角或右上角。但是在不改变html结构的情况下，您只需在菜单div中添加上边距即可

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

我没有详细研究过这一点，但是如果您设置包含div的

位置：relative

，您只需将

ul

位置：绝对；底部：0；右：0

，它应该放在你想要的地方

例如：

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


标题

一个
两个
等等

您可以使用表：

<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; } #头衔 { 宽度：100%； } #标题td+td { 文本对齐：右对齐；垂直对齐：居中； } 垂直对齐默认设置为居中，因此无需设置它。

或者，若你们不想使用表格，你们可以只设置paddingtop:10px；进入#菜单ul.

这似乎把它放在了页面底部？它应该只放在包含元素（div）的底部吗？thanks@tjko：如果右框中的字体大得多，您将如何解决此问题。基线不再对齐。字体在顶部被剪裁，但这更容易修复。@tobefound--在较大字体中添加空格会使基线和高度的计算结果在两个框中相同我想使用表格更容易，但我只是想弄清楚如何在没有表格和没有特定的XXpx偏移值的情况下进行。。。我想我应该这么清楚。。。但垂直排列：中间；不居中。不鼓励使用HTML表来对齐元素，因为现在有更好的解决方案（如FlexBox），而且标记的语义使用不好。这很有效，也很容易。。。只是如果我改变左边文本的大小，我就必须改变左边的像素。。。我有一个基线（这个分区），我想它坐在已经，但我不能使用它？ <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> #title { width:100%; } #title td+td { text-align:right; vertical-align:center; }