Question

我需要在HTML中放入一些公式，并想要描述值的来源。在TeX中我只使用overbracket / underbracket包（参见https://tex.stackexchange.com/questions/132526/overbrace-with-square-bracket的例子）。

是否有一个类似的＆＃34;库＆＃34;或者你称之为只使用CSS实现相同的东西？（我只用方括号就可以了。）

我尝试自己尝试重新创建类似的东西，但在试图展示支架时我遇到了问题。

F.e。我尝试使用表格来使描述显示在公式的上方或下方，但是公式的一部分将不再与公式的其余部分在同一行上。此外，使用边框我无法重新创建方括号，如链接...

所示

编辑：所以这应该可视化我遇到的问题：

CSS

table {
  display: inline-block;
}

HTML

<table>
  <tr><td>+1</td><tr>
  <tr><td>value #1</td><tr>
</table>
<table>
  <tr><td>value #2</td><tr>
  <tr><td>+1</td><tr>
</table>
= 10

https://jsfiddle.net/jcqjr8ge/

基本上，所有＆＃34; + 1s＆＃34;和＆＃34; = 10＆＃34;应该在同一行，其中值的描述应高于或低于值。

Answer 1

这很容易做到，因为你只需要一个方括号（<a href="#" class="btn btn-primary btn-sm form-control>Link Text</a>）括号。我选择解决这个问题的方法是简单地使用一个伪[元素，显示它以阻止一个新行，并给所有边但顶部边框：

＆＃13;

after

＆＃13;

[data-bracket] {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
[data-bracket]:after {
  content: "";
  display: block;
  height: 6px;
  border: 2px solid black;
  border-top: none;
}
[data-bracket]:before {
  content: attr(data-bracket);
  position: absolute;
  top: 100%;
  font-size: 80%;
  padding: 5px;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%)
}

＆＃13;

要显示其下的说明文字，我使用了<p>Uber-cool math formula: <span data-bracket="Very hard math">2+2 = 1*4</span> </p>元素，从before属性设置了内容，并将其置于＆＃34;括号＆＃34;

JSFiddle for you to play with

如何使用css重新创建tex的over-underbracket

1 个答案: