css 样式让一行字幕横着走

html-css027

css 样式让一行字幕横着走,第1张

CSS代码如下：

.div-inline{ display:inline}

Html代码片段：

<div class="div-inline">第一个div盒子</div><div class="div-inline">第二个盒子</div><div class="div-inline">第三个盒子</div>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

    margin: 0

    padding: 0

}

.menu {

    font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif

    margin: auto

    width: 300px

}

ul {

    list-style: none

    text-align: center

}

a {

    text-decoration: none

}

.menu>ul>li {

    float: left

    width: 60px

    height: 30px

    line-height: 30px

    margin: 0 10px 0 10px

}

.menu>ul li>ul {

    display: none

    background-color: red

}

a,li {

    cursor: pointer

}

.menu>ul li:hover {

    background-color: #fd3

}

.menu>ul li:hover>ul {

    display: block

}

    </style>

</head>

<body>

    <div class="menu">

        <ul>

            <li> <a href="#">

菜单一

</a>

                <ul>

                    <li>子菜单1</li>

                    <li>子菜单2</li>

                    <li>子菜单3</li>

                </ul>

            </li>

            <li> <a href="#">

菜单二

</a>

                <ul>

                    <li>子菜单1</li>

                    <li>子菜单2</li>

                    <li>子菜单3</li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>