带有“=”符号的文本对齐答案

【问题标题】：text alignment with "=" sign带有“=”符号的文本对齐
【发布时间】：2020-12-04 21:55:03
【问题描述】：

我想将文字与“=”符号对齐，如下图所示：

我可以使用 mathjax 来实现，但如果可能的话，我想使用 css 来实现。但是我这样做的方式不是使等号符号彼此对齐。我需要你的帮助。

这是我尝试过的，

Solution, <br>
Given, f(x) = 3x <br>
g(x) = x + 2 <br>
fog(x) = 18 <br>
To find: x = ?, <br>
Now, <br>
fog(x) = 18 <br>
or, f(x + 2) = 18 <br> 
or, 3(x + 2) = 18 <br>
or, x + 2 = 6 <br>
&therefore; x = 4

【问题讨论】：

这能回答你的问题吗？ How to relatively align text with CSS?
@Aziz 不，我已经说过我可以使用 mathjax 来实现，但我想使用 css 来实现。该问题的答案是使用 mathjax

标签： html css alignment text-alignment

【解决方案1】：

您可以在类中使用显示、文本对齐和宽度：

.c-left{
  text-align: right;
  width: 50px;
  display: inline-block;
}

.c-mid{
  text-align: center;
  width: 10px;
  display: inline-block;
}

.c-right{
  text-align: left;
  width: 50px;
  display: inline-block;
}

<div>
  <div class="c-left">a + b</div>
  <div class="c-mid">=</div>
  <div class="c-right">c</div>
</div>
<div>
  <div class="c-left">2a + 2b</div>
  <div class="c-mid">=</div>
  <div class="c-right">3c</div>
</div>

不确定这是否是您需要的...

【讨论】：

另一种方法是使用老式的“桌子”

【解决方案2】：

您的问题是将文本排列成可以使用 CSS 轻松设置样式的表单。假设您的文本以 JSON 字符串数组的形式出现，即：

[
  "Solution,",
  "Given, f(x) = 3x",
  "g(x) = x + 2",
  "fog(x) = 18",
  "To find: x = ?,",
  "Now,",
  "fog(x) = 18",
  "or, f(x + 2) = 18",
  "or, 3(x + 2) = 18",
  "or, x + 2 = 6",
  "&therefore; x = 4"
]

...您想要一个将其转换为可样式标记的函数。

这是一个使用原生 Javascript 和 CSS 网格的示例：

[...document.querySelectorAll('math-element')].forEach(el => {
  // reset, in case you run this more than once...
  el.innerHTML = '';
  
  // we need JSON.parse as dataset.text is a string
  JSON.parse(el.dataset.text).forEach(text => {
    const div = document.createElement('div');
    // split each row by `=` sign, if it has any
    text.split('=').forEach(t => {
      const span = document.createElement('span');
      if (text.split('=').length < 2) {
        // adds `.single` to items which are single on their row
        span.classList.add('single');
      }
      span.innerHTML = t;
      el.appendChild(span);
    });
    // add a `<hr>` after each element
    const separator = document.createElement('hr')
    el.appendChild(separator);
  })
})

math-element {
  display: grid;
  grid-template-columns: auto 1fr;
}
math-element hr {
  display: none;
}
math-element span {
  grid-column-start: 1;
  text-align: right;
  padding: 0 2px 0 1rem;
}
math-element span:not(.single) {
  font-style: italic;
}
math-element span.single {
  text-align: left;
  padding-top: .5rem;
  font-style: normal;
}
math-element span + span {
  grid-column-start: 2;
  text-align: left;
  padding: 0 2px;
}
math-element span + span:before {
  content: '=';
}

&lt;math-element data-text='["Solution,","Given, f(x) = 3x","g(x) = x + 2","fog(x) = 18","To find: x = ?,","Now,","fog(x) = 18","or, f(x + 2) = 18","or, 3(x + 2) = 18","or, x + 2 = 6","&amp;therefore; x = 4"]'&gt;&lt;/math-element&gt;

您不必像我一样将值内联为字符串，您可以简单地动态创建元素并直接在数据上运行forEach。

如果您发现 CSS 网格语法和逻辑令人困惑，您始终可以使用 <tr> 和 <td>s 创建一个 <table>，这将为您提供更简单的选择器。出于原则，我建议不要这样做。

我使用<hr>s 来标记每个“行”的结尾（CSS 网格要求所有单元格都是同级单元格）。相反，您可以将行内容嵌套到单个元素中（<div> ？）并对列宽进行硬编码。

显然，CSS 是您可以修改的（即：删除 font-style's，调整 padding 值等...）。

最后一点：如果一个“行”包含多个= 符号，因为这条规则：

math-element span + span {
  grid-column-start: 2;
}

连续的 2 和 3 跨度（以及后续，直到行尾）将在彼此下方显示，每个都以 = 符号为前缀，并与其余部分对齐（这还不错，恕我直言）。如果你想改变这种行为，你可能需要提供一个

math-element span + span + span {
  grid-column-start: 3;
}

... 规则，等等。您还需要更改 grid-template-columns 以匹配：

math-element {
  grid-template-columns: auto auto 1fr;
}

...匹配“列”的数量。

【讨论】：