Question

我对CSS和bootstrap很陌生。

我正在尝试水平对齐导航栏上的列表，但我无法弄清楚错误。

不是将它们并排排列，而是将它们排列在另一个之下，这不是我想要的。

HTML code：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" contents="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/terms.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<title>Terms of Service</title>

</head>
<body>
    <!--Header-->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="images/logo.png" alt="Bet Coins">
                </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#"><b>Terms of Service<b></a>
                    </li>
                    <li>
                        <a href="#"><b>Legal Guidelines</b></a>
                    </li>
                    <li>
                        <a href="#">Privacy Policy</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
</body>

</html>

CSS代码：

.navbar{height:95px;}

.body{background-color: #000000;color: #FFFFFF;}

.navbar-nav li a{line-height: 64px;}

图像：

Answer 1

这是一件非常小的事情，但您需要小心地正确关闭所有标签;如果您关闭<b>中的<li>标记，那么它就可以了。除此之外你的标记是正确的。它应该是这样的：

                <li class="active">
                    <a href="#"><b>Terms of Service</b></a>
                </li>
                <li>
                    <a href="#"><b>Legal Guidelines</b></a>
                </li>
                <li>
                    <a href="#">Privacy Policy</a>
                </li>

我还在<img>标记处添加了一个结束斜杠：

<img src="images/logo.png" alt="Bet Coins" />

但我认为这不如正确关闭<b>代码那么重要。

在这里演示：

http://jsfiddle.net/6804py5w/1/

为什么我的列表没有水平对齐？

1 个答案: