首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在CSS网格中创建一行,跨越所有列

在CSS网格中创建一行,跨越所有列
EN

Stack Overflow用户
提问于 2018-05-29 05:39:05
回答 2查看 5.5K关注 0票数 2

我如何使<legend>跨越所有的行,所以它会搞乱<fieldset>,它的样式是一个3列CSS网格?

代码语言:javascript
复制
<fieldset>
  <legend>Personal Details</legend>
  <label class="field__label" for="first-names">
            First names
        </label>
  <input class="form__entry" id="first-names" type="text" name="firstName">
  <span class="form__feedback form__instructions">
            Must only use letters, spaces, hyphens and apostrophes
        </span>
</fieldset>

CSS:

代码语言:javascript
复制
form {
    display: grid;
    grid-template-columns: minmax(100px, max-content) minmax(200px, max-content) minmax(200px,1fr);
    grid-gap: 10px;
}

fieldset {
    display: contents;
}
EN

Stack Overflow用户

发布于 2018-05-29 05:39:05

应用

代码语言:javascript
复制
fieldset legend {
    grid-column: 1/4;
}

到CSS。这使得它跨越了三列。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50576999

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档