我正在遵循描述的教程/代码 here .有问题的具体代码是这部分:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harrison Kinsley</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p><a href="#" target="blank">Contact</a> | <a href="#" target="blank">LinkedIn</a> | <a href="#" target="blank">Twitter</a> | <a href="#" target="blank">Google+</a></p>
</div>
</footer>
</body>
</html>
当我运行这段代码时，“主页”、“博客”和“内容”页面的链接都在一行中，它们之间没有空格(即链接是这样的:HomeBlogContent)。
我希望它们看起来像:
Home
Blog
Content
当我将这一行添加到代码中时:
<p>This is<br>a paragraph<br>with line breaks</p>
输出符合预期:
This is
a paragraph
with line breaks
当我替换这一行中的字符串时，像这样:
<p><li><a href='/'>Home</a></li><br>li><a href='/blog/'>Blog</a></li><br>li><a href='/contents/'>Contents</a></li></p>
我希望这能解决我的问题，但事实并非如此。谁能告诉我哪里出错了，我怎样才能让主页、博客和内容链接打印在不同的行上？谢谢。
最佳答案
您缺少 <li> 的左括号标签。
或者，如果您不是新手，只需摆脱那些 <br>标签。 <li>将自动转到下一行。
nav {
display: flex;
flex-direction: column;
}<nav>
<a href='/'>Home</a>
<a href='/blog/'>Blog</a>
<a href='/contents/'>Contents</a>
</nav>关于python - HTML CSS : Adding in new lines，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49660848/