0

我有这个代码：

<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 不会停留在应有的位置

有任何想法吗？

4

2 回答 2

2

查理，因为您在 div 的右侧有 800 像素的边距，所以无论屏幕分辨率如何，它都将始终具有该边距。

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

于 2013-03-11T15:34:27.093 回答
2

您需要将父 div 居中...然后菜单将向右浮动。

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

其中宽度应该是“橙色框”的宽度。菜单已经在其父 div 中很好地浮动。

这是一个 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/

于 2013-03-11T15:44:22.537 回答