html - css 如何让文字标题显示在边框上?
阿神
阿神 2017-04-17 11:49:52
0
8
1000

如图,如何让文字标题显示在边框上?

阿神
阿神

闭关修行中......

全部回覆(8)
刘奇

雷雷

Ty80

如果需要更精確的擴展,fieldset的效果不好,還自己實現一個吧,如下:

<style>
    .box{
        position:relative;
        border:1px solid red;
    }
    .box::before{
        content:attr(title);
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translate(-50%,-50%);
        padding:0 10px;
        background-color:#fff;
    }
</style>
<p class="box" title="使用方法">
    <ol>
        <li>这是啥</li>
        <li>干啥</li>
    </ol>
</p>
PHPzhong

提供一種hacked方法:

style:

  p {
    width: 400px;
    height: 200px;
    border: 1px solid #ccc;
  }
  p h1 {
    height: 20px;
    margin: -10px auto 0;
    font-size: 14px;
    padding: 0 10px;
    text-align: center;
    width: 50px;
  }

html:

  <p>
    <h1>嘿嘿嘿</h1>
  </p>
迷茫

隨便想了一下,湊合著用吧
http://codepen.io/colahan/pen...

不太建議使用fieldset,通常會被reset的

伊谢尔伦

絕對定位加文字定寬高

迷茫

很明顯是絕對定位呀

巴扎黑

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板