如何在HTML5中创建一个包含一段文本的框

How to create a box that holds a paragraph of text in HTML5

提问人:Michael Joseph 提问时间:3/5/2023 最后编辑:TotoMichael Joseph 更新时间:3/7/2023 访问量:624

问:

我一直在尝试创建一个包含一段文本的框,我尝试在网上查找,但我仍然很难创建一个。

以下是段落框的 band.css 样式表中的信息:

div {
   width: 80%;
   padding: 10px;
   border: 5px solid gray;
   margin: 0;
}

这是程序中我想包含在框中的段落的代码:

<p style="text-align: center">
    Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
    <br> They are known for doing covers of Bruce Springsteen songs.
</p>

我怎样才能做到这一点?

HTML CSS XHTML

评论

0赞 Itamar Cohen 3/5/2023
您需要添加一个 div 父元素。

答:

0赞 Jason Bruce 3/5/2023 #1

您需要将 p 标签放在 div 容器中,并创建一个类或 id 来标识 div 以进行样式设置。

<div class="text-box">
 <p style="text-align: center">Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
 <br> They are known for doing covers of Bruce Springsteen songs.
 </p>
</div>


div.text-box {
 width: 80%;
 padding: 10px;
 border: 5px solid gray;
 margin: 0;
}

https://jsfiddle.net/jasonbruce/efLbp1y7/1/

评论

0赞 Michael Joseph 3/5/2023
我尝试这样做,但没有出现框。
0赞 Jason Bruce 3/5/2023
你能发布不起作用的代码吗?
0赞 Michael Joseph 3/5/2023
以下是该程序的代码:<div class=“text-box”> <p style=“text-align: center”> 曼弗雷德·曼恩的地球乐队是由来自南非的音乐家曼弗雷德·曼恩创立的英国摇滚乐队。<br> 他们以翻唱布鲁斯·斯普林斯汀的歌曲而闻名。</p> </div> 下面是 css 中的代码: div.text-box { width: 80%; padding: 10px; border: 5px solid gray; margin: 0; }
0赞 Jason Bruce 3/5/2023
我试图看到一个不起作用的工作示例。您可以将 psot 代码发送到 jsfiddle.net 或类似网站等网站吗?
0赞 Michael Joseph 3/5/2023
这里是:jsfiddle.net/xwvf5ht2