HTML/CSS根据<p>元素制作特定的边框

标签 html css

<分区>

我正在使用 Bootstrap 创建我的简历网站,我有一个问题根据 border带有 <p> 的元素.

我有这个 HTML/CSS 部分:

.headline {
  position: relative;
  display: inline-block;
  border: 1px solid #252525;
  margin-bottom: 120px;
  color: #252525;
  font: 12px 'PT Sans', sans-serif;
  line-height: 20px;
  text-align: center;
}
<div id="profil" class="container-fluid">
  <div class="row">
    <div class="span12 text-center">
      <div class="headline">
        <p>
          <span> QUI SUIS-JE ? </span>
        </p>
        <h1>MON PROFIL</h1>
      </div>
    </div>
  </div>
</div>

我想得到这样的东西:

enter image description here

我如何修改我的 CSS 文件才能获得此文件?

谢谢!

最佳答案

使用 <fieldset> <legend>

.headline {
  position: relative;
  display: inline-block;
  border: 1px solid #252525;
  margin-bottom: 120px;
  color: #252525;
  font: 12px 'PT Sans', sans-serif;
  line-height: 20px;
  text-align: center;
}
<div id="profil" class="container-fluid">
  <div class="row">
    <div class="span12 text-center">
      <fieldset class="headline">

        <legend> QUI SUIS-JE ? </legend>

        <h1>MON PROFIL</h1>
      </fieldset>
    </div>
  </div>
</div>

关于HTML/CSS根据<p>元素制作特定的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51001292/

上一篇:javascript - JQuery 颜色甚至 div

下一篇:css - 鼠标悬停和单击时 html div 的下拉效果

相关文章:

javascript - 如何在 React 中绘制红色水平线

css - 响应式设计首先加载什么?

html - 使用angularjs检查字符串是否包含http url

javascript - 根据值(value)显示特定输入

javascript - 我如何 'reset' 调用方法?

html - CSS 网格娱乐

php - 使用 POST PHP 未从输入字段传递整个值

javascript - 表单重置后调用函数

html - 如何在表单中定位 div 类

html - 下拉菜单的 CSS 在 Chrome 和 IE 中无法正常工作