当我使用手动换行符时,它可以正常工作,但当我不使用时,一切都只是重叠。
这是CSS:
header {
background: #fcb9aa;
color: #f3d9d9;
height:100px;
margin: 0;
padding: 0;
position: relative;
text-align:right;
}
ul {
position: relative;
margin-top: 0px;
padding-left: 10px;
}
header li {
display: inline-block;
margin:30px;
}
body{
margin:0;
padding: 0;
margin-top: 0;
background-color: white;
font-family: 'Pacifico', cursive;
}
a, a:hover, a:focus,a:active{
text-decoration: none;
color:inherit;
font-size: 30px;
font-family: 'Pacifico', cursive;
}
a:hover{
color: #55cbcd
}
h1 {
margin: 40px;
text-align: center;
font-family: 'Pacifico', cursive;
}
h2 {
}
.logo{
border-radius: 50%
}
div.nexto{
display: inline-block;
position: relative;
}
.contentl figure{
height: auto;
width: 600px;
overflow: hidden;
}
.contentl figure img{
height:auto;
width: 600px;
transition: transform .3s ease;
}
figure img:hover{
transform: scale(1.5)
}
div.content{
margin:0;
padding:0;
position: relative;
top: -400px;
left: -20px;
text-align: left;
overflow-wrap: break-word;
}
.substance{
font-family: Arial, Helvetica, sans-serif;
overflow-wrap: break-word;
}
这是 HTML
<body>
<header>
<ul>
<li><a>HOME<a></a></li>
<li><a href="albums.html">ARTICLES</a></li>
<li><a href="singles.html">CONTACT</a></li>
<li><a href="artists.html">ABOUT US</a></li>
</ul>
</header>
<section>
<h1>Welcome to my website</h1>
</section>
<section class="contentl">
<div class="nexto">
<figure>
<img src="img/ph1.jpg" alt="im1">
</figure>
</div>
<div class="nexto">
<div class="content">
<h1 class="date">6/7/2021</h1>
<h2 class="name">
PSYCHOLOGY STUFF
</h2>
<h3 class="substance">Psychology is the science of mind and behavior. Psychology includes the study of conscious and unconscious phenomena,<br> as well as feelings and thought. It is an academic discipline of immense<br> scope. Psychologists also seek an understanding of the emergent properties of brains, linking the discipline to neuroscience.</h3>
</div>
</div>
</section>
</body>
</html>
问题出在 h3 标签中,我需要添加自己的换行符才能使其工作。
此外,我非常感谢一些让我的代码运行得更好的技巧,因为现在一切都让我感到非常困惑,而我正在寻找简化事情的方法。
答案 0 :(得分:0)
您可以为 h3 标签使用固定宽度,而且您可以将带有 h3 标签的文本放在另一个标签(一个
标签)内。还可以使用一些 css 框架,如 bootstrap、bulma 等,帮助您以更少的努力制作出色的 css UI。