Question

我想在一些html元素周围放一个框。但是，此代码会导致每个元素。我不想使用html或body元素，因为我在框外面还有其他我想要的元素。

h1, p {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;
                text-align: center;}

        </style>
        </head>
        <body>
            <p>this should be in the box</p>
            <h1>this should be in the box</h1>
            <h2> this should not be in the box</h2>

Answer 1

你需要一个周围的元素来连接boder。在这种情况下，您可以按照以下方式使用您的样式中的正文。

<style type="text/css">
body {
            width: 300px;
            padding: 50px;
            border: 20px solid #0088dd;
            text-align: center;}

</style>

警告：在正文标记上放置边框最终不会出现在任何最佳做法列表中。永远！

正确的方法是使用一个类

   <style type="text/css">
    .boxme {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;
                text-align: center;}

    </style>
</header>
<body>
    <div class="boxme">
        <p>lol</p>
        <h1>Thanks for helping</h1>
    </div>
    <p>Other text</p>

Answer 2

尝试这样的事情......

 <div class="border-csl">
       <p>lol</p>
       <h1>Thanks for helping</h1>
  </div>

.border-csl {
        width: 300px;
        padding: 50px;
        border: 20px solid #0088dd;
        text-align: center;
 }

如何解决此CSS问题？

2 个答案: