发表新帖
发表新帖

Text in Border CSS HTML

后端 未结
关注
8 2112
佛祖请我去吃肉
佛祖请我去吃肉 2020-11-22 05:56

I\'d like to have a div that looks like this:

\"border

Is this possible to do with HTML + CSS

相关标签:
8条回答
  • 别那么骄傲
    2020-11-22 06:25

    I know a bit late to the party, however I feel the answers could do with some more investigation/input. I have managed to create the situation without using the fieldset tag - that is wrong anyway as if I'm not in a form then that isn't really what I should be doing.

    /* Styles go here */

#info-block section {
    border: 2px solid black;
}

.file-marker > div {
    padding: 0 3px;
    height: 100px;
    margin-top: -0.8em;
    
}
.box-title {
    background: white none repeat scroll 0 0;
    display: inline-block;
    padding: 0 2px;
    margin-left: 8em;
}
    <aside id="info-block">
  <section class="file-marker">
    <div>
      <div class="box-title">
        Audit Trail
      </div>
      <div class="box-contents">
        <div id="audit-trail">
        </div>
      </div>
    </div>
  </section>
</aside>

    This can be viewed in this plunk:

    Outline box with title

    What this achieves is the following:

    • no use of fieldsets.

    • minimal use if CSS to create effect with just some paddings.

    • Use of "em" margin top to create font relative title.

    • use of display inline-block to achieve natural width around the text.

    Anyway I hope that helps future stylers, you never know.

    0 讨论(0)
  • 旧时难觅i
    2020-11-22 06:28

    You can use a fieldset tag.

    <!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

</body>
</html>

    Check this link: HTML Tag

    0 讨论(0)
  • 孤街浪徒
    2020-11-22 06:30

    It is possible by using the legend tag. Refer to http://www.w3schools.com/html5/tag_legend.asp

    0 讨论(0)
  • 北恋
    2020-11-22 06:31

    For a duplicate, here another option with transform, no fieldset ( and rounded border required in the duplicates) :

    position or transform can help you too :

    * {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}

.fieldset {
  border: solid;
  color: #353fff;
  border-radius: 1em;
  margin: 2em 1em 1em;
  padding:0 1em 1em;
}

.legend {
  transform: translatey(-50%);
  width: max-content;
  background: white;
  padding: 0 0.15em;
}

.fieldset li {
  list-style-type: " - ";
}
    <div class="fieldset">
  <h1 class="legend">Some Title</h1>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

    0 讨论(0)
  • 忘了有多久
    2020-11-22 06:32

    Text in Border with transparent text background

    .box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: #333;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: #333;
    display: block;
    height: 50%;
}
    <div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

    0 讨论(0)
  • 不要未来只要你来
    2020-11-22 06:34

    You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)

    div{
    height:100px;
    width:100px;
    border:2px solid black;
}

h1{
    width:30px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

    Note: you need to set a background as well as a width on the h1

    Example: http://jsfiddle.net/ZgEMM/

    EDIT

    To make it work with hiding the div, you could use some jQuery like this

    $('a').click(function(){
    var a = $('h1').detach();
    $('div').hide();
    $(a).prependTo('body');    
});

    (You will need to modify...)

    Example #2: http://jsfiddle.net/ZgEMM/4/

    0 讨论(0)
 看不清?
提交回复
热议问题