【问题标题】:css h1 - only as wide as the textcss h1 - 仅与文本一样宽
【发布时间】:2011-06-01 18:05:18
【问题描述】:

我的网站有一个 H1 样式:

.centercol h1 {
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

背景色跨越了整个centercol的宽度,500px...

如何让这个 H1 只跨越 H1 文本的宽度?

【问题讨论】:

    标签: css


    【解决方案1】:
    .h1 {
      width: -moz-fit-content;
      width: fit-content;
    
      // workaround for IE11
      display: table;
    }
    

    所有现代浏览器都支持width: fit-content

    对于 IE11,我们可以使用 display: table 模拟这种行为,它不会像 display: inline-blockfloat: left 那样破坏边距折叠。

    【讨论】:

    • 这是最好的答案
    【解决方案2】:

    我最近通过使用 table-caption 解决了这个问题,但我不能说是否推荐。在我的情况下,其他答案似乎没有锻炼。

    h1 {
      display: table-caption;
    }
    

    【讨论】:

      【解决方案3】:

      在flexbox中对齐自启动,对齐自中心...

      .centercol h1{
          background: #F2EFE9;
          border-left: 3px solid #C6C1B8;
          color: #006BB6;
          display: block;
          align-self: center;
          font-weight: normal;
          font-size: 18px;
          padding: 3px 3px 3px 6px;
      }
      

      【讨论】:

      • 你的回答不完整,你连什么是flexbox都没解释
      【解决方案4】:

      有点像其他建议,您可以使用以下代码。但是,如果你确实走边距: 0 auto;路线我建议将 H1 顶部和底部的边距设置为 0 以外的值。所以,也许 margin: 6px auto;什么的。

      .centercol h1{
          display: inline-block;
          color: #006bb6;
          font-weight: normal;
          font-size: 18px;
          padding:3px 3px 3px 6px;
          border-left:3px solid #c6c1b8;
          background:#f2efe9;
          display:block;
      }
      

      【讨论】:

        【解决方案5】:

        解决此问题的一个简单方法是将 H1 元素向左浮动:

        .centercol h1{
            background: #F2EFE9;
            border-left: 3px solid #C6C1B8;
            color: #006BB6;
            display: block;
            float: left;
            font-weight: normal;
            font-size: 18px;
            padding: 3px 3px 3px 6px;
        }
        

        我整理了一个简单的 jsfiddle 示例,该示例显示了“float:left”样式对 H1 元素宽度的影响,供任何寻求更通用答案的人使用:

        http://jsfiddle.net/zmEBt/1/

        【讨论】:

          【解决方案6】:

          您可以使用display:inline-block 来强制执行此行为

          【讨论】:

            【解决方案7】:

            您可以使用 inline-block 值进行显示,但是在这种情况下,您将失去 h1 的块功能,即如果兄弟姐妹是内联元素,它们将与 h1 内联显示(在这种情况下,您可以使用 line-打破
            )。

            display:inline-block; 
            

            【讨论】:

            • 你也可以试试display:table; 这样你就不需要使用换行符了。
            • 对于那些想知道如何设置块引用宽度(需要适合图片左侧)的人使用 display: block;溢出:隐藏
            【解决方案8】:

            这是因为你的<h1> centercol 的宽度。在<h1> 上指定一个宽度,如果您希望它居中,请使用margin: 0 auto;

            或者,或者,您可以浮动<h1>,这将使其仅与文本一样宽。

            【讨论】:

            • 如果我指定一个宽度,那么一个带有更多文本的 H1 标签会换行,对吗?
            【解决方案9】:

            您可以使用<span> 而不是<h1>

            【讨论】:

            • 改变语义(语义含义)并不是一个很好的主意,只是为了做样式。将<h1>与css属性display: inline-block一起使用会更好。
            猜你喜欢
            • 2020-12-17
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-08-06
            • 1970-01-01
            • 2016-12-05
            • 2011-06-11
            相关资源
            最近更新 更多