Question

我需要在div标签周围显示边框，边框本身带有标题。为了做到这一点，这是我到目前为止所提出的

＆＃13;

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
}
    
.componentTitle {
  font-size: 18px;
  width: 15%;
  background-color: white;
  margin-top: -25px;
}

＆＃13;

 <div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>

＆＃13;

正如您所看到的，我正在使用保证金属性将标题推到边框顶部。我不确定这是否是正确的做法，我有以下问题。

我使用像素（边距）和固定值（-25px）定位标题。这是一个必须在手机，平板电脑上工作的网站。这是一种可接受的方法吗？
我将背景颜色设置为白色，这样边框就不会出现在文本后面，这是一个不错的方法吗？
有没有更好，更可接受的方法，我不想使用fieldset，因为我们几乎无法控制边框（border-radius）。

Answer 1

我认为你走在正确的轨道上。我做了一些更改，以便更好地控制样式。您可以使用ems或pixels。

将标题和内容换成新的div并给出一个负余量：

<div class='componentWrapper'>
  <div>
    <div class='componentTitle'>This is the title</div>
    <div class='componentContent'>
      <p>This is the component body text</p>
    </div>
  </div>

.componentWrapper div {
  margin-top: -1em;
}

将您的标题设置为display: inline-block并使用padding来控制其周围的空白区域（而不是使用width）

.componentTitle {
  font-size: 18px;
  background-color: white;
  display: inline-block;
  padding: .5em;
}

codepen

片段：

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
  margin-top: 1em;
}

.componentWrapper div {
  margin-top: -1.2em;
}

.componentTitle {
  font-size: 18px;
  background-color: white;
  display: inline-block;
  padding: .5em .3em;
}

<div class='componentWrapper'>
  <div>
    <div class='componentTitle'>This is the title</div>
    <div class='componentContent'>
      <p>This is the component body text</p>
    </div>
  </div>

Answer 2

有三种合理的方法可以用来实现这一目标。

您可以使用<fieldset> legend这是执行此操作的基本HTML方式。您可以找到有关此 here.
使用带定位的自定义CSS，而不是负边距等：

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper .componentTitle {
  position: absolute;
  top: -25px;
  background: #fff;
  padding: 0 10px;
}

<div class='componentWraper'>
  <p class='componentTitle'>This is the title</p>This is the component body text</div>

将自定义CSS与 pseudo-elements ：

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper::before {
  content: 'This is the title';
  position: absolute;
  top: -10px;
  padding: 0 10px;
  background: #fff;
}

<div class='componentWraper'>This is the component body text</div>

Answer 3

这就是我想出的。我想摆脱负面利润，但无法找到办法做到这一点。

在offset title上查看Yvonne Aburrow（@vogelbeere）的笔CodePen。

<强> HTML

<div class="componentWrapper">This is the component body text</div>

<强> CSS

.componentWrapper {
  border: 1px solid blue;
  border-radius: 40px;
  padding: 16px;
  width: 95%;
  margin: 3em;
}

.componentWrapper:before {
  content: "this is the title";
  font-size: 18px;
  width: 10%;
  background-color: white;
  border: 1px solid blue;
  border-radius: 12px;
  display: block;
  margin-top: -29px;
  padding: 3px;
}

我不确定屏幕阅读器如何处理CSS中的标题文本（或者如果你有很多不同的标题，你将如何扩展它。

Div标签与标题的边界

3 个答案: