HTML CSS：添加新行
[英]HTML CSS: Adding in new lines
問題描述
我正在遵循此處描述的教程/代碼。 有問題的特定代碼是這一部分：
<!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>
我本來希望能解決我的問題，但事實並非如此。 有人可以告訴我我哪里出了問題，如何獲得Home，Blog和Content鏈接以單獨的行打印？ 謝謝。
3 個解決方案
解決方案1
1 2018-04-04 22:00:53
您缺少<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>
解決方案2
0 2018-04-04 22:05:39
您的標記在原始文件中對我來說看起來不錯。 但是，從描述的問題出發，聽起來好像您將Bootstrap 3導入此文件的方式有問題。 檢查是否有文件bootstrap.min.css ，你說你擁有了它在personal/css/bootstrap.min.css
解決方案3
-1 2018-04-04 21:41:51
這應該工作。
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contents/'>Contents</a></li>
</ul>
使用Selenium添加新CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.