个人中心
gpt4 book ai didi

html - CSS float :right and vertical align?

转载 作者：搜寻专家 更新时间：2023-10-31 08:22:09 24 4
gpt4 key购买 nike

我正在尝试使用 html 和 css 并试图弄清楚如何使这项工作...我只是想让#menu float 到 h1 的右侧但在同一基线上所以...但是显然 float:right 使它 float 到右上角？有什么方法可以让它 float 到右下角或与包含的 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>

这是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

感谢您的帮助!

最佳答案

我没仔细研究过，但是如果你设置包含的div的position: relative，你可以让ul position: absolute;底部:0；对: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>

关于html - CSS float :right and vertical align?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3346181/

24 4 0
文章推荐： java - 如何以人类可读的方式在 Java 中显示日历？
文章推荐： javascript - jQuery 自动完成 - 单击提交按钮不算作 "change"
文章推荐： java - Spring Security LDAP 身份验证用户必须是 AD 组的成员
文章推荐： java - 两次读取输入流而不将其存储在内存中
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com