Is it possible to achieve a
-like effect without using the
tag?

前端未结

关注

 9  2284

春和景丽

I personally like the

tag because of how it draws a box and puts the at the top of it, over the border. Like this.

相关标签:

9条回答

谎友^

2020-12-01 06:26
No, it isn't really possible. Even browser makers themselves are struggling with that.

Of course, I couldn't resist having a go at it anyway. And I spent so much time on that, that Anonymous came up with a "solution" rather similar to mine in the mean time (his test1). But mine doesn't need the fixed width "legend".

This code is evidently a bit of a hack, though, and I don't know how well it'll fare in complex sites. I also agree with Anonymous that using a fieldset for grouping isn't nearly as bad as using tables for layout. Fieldsets were designed for grouping elements, though in HTML they're really only supposed to be used for grouping form controls.
```
.fieldset {
  border: 2px groove threedface;
  border-top: none;
  padding: 0.5em;
  margin: 1em 2px;
}

.fieldset>h1 {
  font: 1em normal;
  margin: -1em -0.5em 0;
}

.fieldset>h1>span {
  float: left;
}

.fieldset>h1:before {
  border-top: 2px groove threedface;
  content: ' ';
  float: left;
  margin: 0.5em 2px 0 -1px;
  width: 0.75em;
}

.fieldset>h1:after {
  border-top: 2px groove threedface;
  content: ' ';
  display: block;
  height: 1.5em;
  left: 2px;
  margin: 0 1px 0 0;
  overflow: hidden;
  position: relative;
  top: 0.5em;
}
```
```
<fieldset>
  <legend>Legend</legend> Fieldset
</fieldset>

<div class="fieldset">
  <h1><span>Legend</span></h1> Fieldset
</div>
```
As a side note, you might also want to have a look at the HTML5 figure and figcaption elements. Those seem to be the best elements to use in your example.

That's only for the semantic part of the issue, though, since I don't think those elements are rendered the same as a fieldset/legend. Not to mention that current browsers probably don't support these elements yet to begin with.
0 讨论(0)
发布评论:

提交评论
- 加载中...

[愿得一人]

2020-12-01 06:36

I update a little bit the propostion of Anonymous to that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
    border: 2px groove ButtonFace;
    border-top-width: 0;
    margin-left: 2px;
    margin-right: 2px;
    padding: .35em .625em .75em;
    margin-top: 1em;
    position: relative;
}

.fake_legend {
    margin-top: -1em;
}

.fake_legend.test1::before {
    position: absolute;
    top: 0;
    left: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 0.5em;
}

.fake_legend.test1::after {
    position: absolute;
    top: 0;
    right: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 80%;
}
.fake_legend.test1 div {
    z-index: 100;
    background: white;
    position: relative;
    float: left;
}


.fake_fieldset.test2 {
    padding: 0;
    padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
    margin: 0;
    border: 0;
}

.fake_legend.test2 {
    display: table;
    width: 100%;
}

.fake_legend.test2 span {
    display: table-cell;
}

.fake_legend.test2 span:first-child {
    width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
    width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
    /* the rest of this code is left as an exercise for the reader */
}
</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>

0 讨论(0)

心在旅途

2020-12-01 06:39

Use ::before pseudoelement to generate the top border of the emulated <fieldset>, then position the emulated <legend> element over the ::before block with z-index and position properties. Lastly, use gradient and a solid color-stop on the top of the emulated fieldset, setting the top color of the linear gradient to transparent so whatever background is behind the fake fieldset will be visible.

0 讨论(0)
发布评论:

提交评论
- 加载中...

后悔当初

2020-12-01 06:41

If you need to use border-radius as well:

body {
  font-family: monospace;
}

.not-a-fieldset {
  border: 3px solid blue;
  border-top: none;
  padding: 0 16px 16px;
  margin: 28px 0 0;
  border-radius: 4px;
}

.not-a-legend {
  font-size: 20px;
  margin: 0 -19px;
  overflow: hidden;
  transform: translate(0, -13px);
}

.not-a-legend > span {
  float: left;
  padding: 0 8px;
  line-height: 24px;
}

.not-a-legend::before,
.not-a-legend::after {
  content: '';
  height: 8px;
}

.not-a-legend::before {
  border-top: 3px solid blue;
  border-left: 3px solid blue;
  border-top-left-radius: 4px;
  float: left;
  margin: 10px 0 0;
  width: 8px;
}

.not-a-legend::after {
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-top-right-radius: 4px;
  position: relative;
  display: block;
  left: 0;
  top: 10px;
  overflow: hidden;
}

<section class="not-a-fieldset">
  <h1 class="not-a-legend">
    <span>Legend</span>
  </h1>
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

0 讨论(0)

孤街浪徒

2020-12-01 06:41

I believe you already know the answer.

You have 2 options, provide your own border (that's a lot of unnecessary work) or position an element with occludes the border (the problem with that is that you can only have a solid background color, but maybe that's fine).

To my knowledge there's not anything you can do to make this workout nicely in every browser out there. I like your style though, it's the right approach but probably not a problem you'll be able to solve in a satisfying manner.

My general opinion on these topics is that you should not try and do things with the web that requires A) excessive effort or B) a markup solution which is not entirely obvious to begin with. The web has limitations and you would do well to ad-her to them rather than trying to work around those limitations.

So I'm forced to ask, what's the problem with <legend/>?

0 讨论(0)
发布评论:

提交评论
- 加载中...

我在风中等你

2020-12-01 06:45

Demo jsBin link

.fieldset {
  border: 1px solid #ffffd;
  margin-top: 1em;
  width: 500px;
}

.fieldset h1 {
  font-size: 12px;
  text-align: center;
}

.fieldset h1 span {
  display: inline;
  border: 1px solid #ffffd;
  background: #fff;
  padding: 5px 10px;
  position: relative;
  top: -1.3em;
}

<div class="fieldset">
  <h1><span>Title</span></h1>
  <p>Content</p>
</div>

0 讨论(0)

1 2 下一页

Is it possible to achieve a -like effect without using the tag?

Is it possible to achieve a
-like effect without using the
tag?