Question

我有这段代码：

<style> 
        .floatright 
        {
            float: right;
            margin-right:800px;
        }

        .menu {
            padding: 0;
            float: right;
            width: auto;
            position:relative;
        }
        .menu ul {
            list-style-type: none; 
            margin: 0; 
            padding: 0;
        } 
        .menu li { 
            display:inline; 
            padding:0;
            margin: 0px;
        } 
        .menu a:link, 
        .menu a:hover {
            text-decoration:none;
            padding:0 5px 5px 0;
            margin-right: 8px;
        }
</style>

<div class="floatright">
<ul class="menu">
<li><a href="/apidocs">api</a></li>
<li><a href="/tools">tools</a></li>
<li><a href="/blog">blog</a></li>
</ul>
</div>

它意味着浮动到页面的右侧（不在右上角 - 就在左侧）并且每个链接之间都有间隙。

间隙工作正常但是当屏幕调整大小时，ti不会停留在它应该

的位置

任何想法？

Answer 1

查理，因为你在div的右边有一个800px的边距，无论屏幕分辨率如何，它都会有这个余量。

如果您希望根据屏幕分辨率减少边距，可以查看使用百分比或媒体查询。

Answer 2

你需要将父div中心...然后菜单会向右浮动。

    .floatright {
        width:1000px;
        height:50px;
        margin:0 auto;
    }

宽度应为“橙色框”的宽度。菜单已经在其父级中漂浮。

这是一个jsfiddle示例：http://jsfiddle.net/hvLkh/

其他建议： 1）不要将div放在body标签之外，2）在div中添加hight属性以将框推下来，3）将字体格式直接添加到css中并避免使用字体标签......像这样：

    .floatright {
        width:1000px;
        height:50px;
        margin:0 auto;
        font-family:"Trebuchet MS",Arial,Verdana,Tahoma;

    }

这是一个更新的小提琴：http://jsfiddle.net/n6mnP/1/

CSS固定位置向右浮动

2 个答案: