html-获取标签以转到右侧?

到目前为止,这是我所做的:

<html>
<head>
<style>

/* Tabs */
#navlist {
        padding: 3px 0;
        margin-left: 0;
        border-bottom: 1px solid #778;
        font: bold 12px Verdana,sans-serif;
        /* WARNING: when using font-size/font-family instead of font,do not forget to set line-height:normal otherwise 1px more is shown
           between tabs and their bottom line in IE8 and FF3.6 */
}

#navlist li {
        list-style: none;
        margin: 0;
        display: inline;
}

#navlist li a {
        padding: 3px 0.5em;
        margin-left: 0px;
        border: 1px solid #778;
        border-bottom: none;
        background: #DDE;
        text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover {
        color: #000;
        background: #AAE;
        border-color: #227;
}

#navlist li a#current {
        background: white;
        border-bottom: 1px solid white;
}
</style>
</head>
<body>
                <div id="navcontainer">
                        <ul id="navlist">
                                    <li><a id="current" href="#">Col1</a></li>
                                    <li><a href="#">Col2</a></li>
                                    <li><a href="#">Col3</a></li>
                            </ul>
                </div>
</body>
</html>​

并保存到http://jsbin.com/uvako3/2.感谢您的帮助

最佳答案
只需添加text-align:right;到#navlist CSS.

说明:您正在使列表项内联元素.这使得它们遵循适用于文本的一般规则.因此,只需设置文本对齐方式,即可指定内联元素的对齐位置.

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...