Question

我的导航菜单display: inline;出现问题。我想让它横向化，但它似乎并不想工作。我尝试使用display: inline-block，但它仍然没有做任何事情。我可以帮忙吗？我已经使用FireFox，Google Chrome，Internet Explorer和小提琴进行了测试：http://jsfiddle.net/SpottedFire/fs69dz6p/1/

HTML：

<body>
    <div id="overall">
        <div class="content">
            <div class="nav">
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Art</a></li>
                    <li><a href="#">Animations</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </div>
    </div>

CSS：

body {
 background-color: #CBA482;
 color: #D2DAEF;
 left: 0;
 margin: 0;
 overflow: hidden;
 position: relative;
}

.nav{
 text-align: right;
 background-color: rgba(255,255,255,0.5);
 border: solid 2px;
 border-color: white;
 border-radius: 10px;
 margin: 0;
 padding: 0;
 width: 80%;
}

li.nav {
 display: inline-block;
}

a:link {
 color: #DBE8EF;
 text-decoration: none;
}
a:hover {
 color: #BED2E3;
 text-decoration: none;
}
a:visit{
 color: #BE71DB;
 text-decoration: none;
}

Answer 1

li.nav {...}

应该是

.nav li {...}

Answer 2

它是你在第21行的css类定义，我更新了你的JS Fiddle，而不是使用li.nav，正确的选择器应该是.menu＆gt;利

    .menu > li{

        display: inline-block;
        margin-right: 10px;

    }

显示：内联不适用于任何浏览器

2 个答案: