有没有办法把它包起来?

时间:2019-02-11 18:02:42

标签: html css

我有这两个跨度,用中心文字来创建下划线。现在碰巧该行没有中断,因此完全在下面的行中显示。

Screenshots

span.labeled {
  display: inline-block;
  vertical-align: top;
}

span.label {
  display: block;
  text-align: center;
  border-top: 1px solid black;
}

1 个答案:

答案 0 :(得分:0)

如果不将标签居中,则可以靠近:

Stylesheet.flatten()
<Button
  style={Stylesheet.flatten([
    {
      backgroundColor: backgroundColor || COLORS.lightRed,
      borderRadius: 3,
      height: 44,
      width: '100%',
     },
     style && style,
  ])}

或者,如果您不介意标签仅在包装元素上对齐,则可以尝试:

p {max-width:320px; line-height:3em; font-family:Arial; color:#666; font-size:12px;}
span[title] {position:relative; border-bottom: 1px solid currentColor;}
span[title]::after {
  content:attr(title);
  position:absolute; top:0; left:0; margin-top:.5em;
}
<p>The baseball players <span title="A">decided</span> that they <span title="B">all would donate</span> $50 <span title="C">annually</span> to cover the $1,000 sponsor fee for the <span title="D">local youth baseball team</span>. <span title="E">No error.</span></p>

仅在铬和野生动物园中进行了测试