Question

编辑任务已完成，感谢您的回复。如果有人可以帮我点击展开/淡出来查看功能，那将非常有帮助。我正在调查它。

我正在为我的网站进行非常简单的导航。我无法弄清楚为什么文本不能坚持到右边。以下是一个示例：http://jsfiddle.net/E6ArK/

我也希望在某个时候添加点击展开和可能淡入视图功能。任何帮助将不胜感激。

HTML

<div class="navigation">
    <ul>
        <li>
             <h1>Applications</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
        <li>
             <h1>Forum</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
        <li>
             <h1>Guilds</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
        <li>
             <h1>Imageboards</h1>

            <ul>
                <li>People</li>
                <li>Random</li>
                <li>Screen Shots</li>
                <li>Wallpapers</li>
            </ul>
        </li>
        <li>
             <h1>Projects</h1>

            <ul>
                <li>Not Available</li>
                <li>Not Available</li>
            </ul>
        </li>
    </ul>
</div>

CSS

/* NAVIGATION */

/* Heading */
 .navigation ul li h1 {
    background : #000000;
    color : #ffffff;
    display : table;
    font-weight : 100;
    margin : 0;
    padding : 6px;
    border-right : 3px solid #ffffff;
    font-size : 28px;
    margin-bottom : 3px;
}
/* Positioning */
 .navigation {
    font-family :'Open Sans Condensed', sans-serif;
    margin : 12px;
    position : fixed;
    right : 0;
    top : 0;
}
.navigation ul {
    font-size : 20px;
    margin : 0;
    padding : 0;
    text-align : right;
}
.navigation ul li {
    clear : right;
    color : #ffffff;
    float : right;
    list-style-type : none;
}
/* Second Level */
 .navigation ul li ul {
    display : none;
}
.navigation ul li:hover ul {
    display : block;
}
.navigation ul li ul li {
    background : #000000;
    border-right : 3px solid #ff0000;
    color : #ffffff;
    display : table;
    font-size : 18px;
    margin-bottom : 3px;
    padding : 6px;
}

Answer 1

您还需要将标题浮动到右侧。将float: right添加到.navigation ul li h1的规则块中。这应该让他们坚持到右边。

Answer 2

您只需要在标题样式中添加一个float：right属性：

 /* Heading */
 .navigation ul li h1 {
    background : #000000;
    color : #ffffff;
    display : table;
    font-weight : 100;
    margin : 0;
    padding : 6px;
    border-right : 3px solid #ffffff;
    font-size : 28px;
    margin-bottom : 3px;
    float: right;
}

希望有所帮助

无法正确地将列表浮动到右侧

2 个答案: