Question

我试图在公式中对齐等号。我尝试了span和div，但是如果LHS内容大小> RHS，则对齐结束：

<span class="ctr">
    <span class="lft">\(1+2\ \) </span> \(=\) 
    <span class="lft"> \(\ 3\)</span>
</span>
<br>
<span class="ctr">
    <span class="lft">\(1+5\ \) </span> \(=\) 
    <span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>
<br>
<span class="ctr">
    <span class="lft">\(1 + 3 + 2\ \) </span> \(=\) 
    <span class="lft"> \(\ 6 + 2 - 2\)</span>
</span>

.ctr{position: absolute; left: 40%;}
.lft{position: relative; display: inline;}

如何对等式大小对齐等号？感谢您的帮助。

Answer 1

一种选择是，您可以简单地使用表格并将左侧项目浮动到右侧，即.lft {float:right:}

在此处查看工作示例：https://jsfiddle.net/r6bxgem3/

表将如下所示：

.lft {
  float: right;
  display: inline;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
}

<head>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
</head>

<div class="row">
  <div class="left">Stuff</div>
  <div class="main">

      <table><tr><td><span class="lft">
     
      \(1+2\ \)                                      <!--LHS-->
      </span></td><td>\(=\) </td><td>                <!--Equal sign-->
      \(\ 3\)                                        <!--RHS-->
      </td></tr><tr><td><span class="lft">

      \(1+5\ \)                                                         
      </span></td><td>\(=\)</td><td>
      \(\ 6+2-2\)                                                            
      </td></tr><tr><td><span class="lft">

      \(1+3+2\ \)                                                         
      </span></td><td>\(=\)</td><td>
      \(\ 6+2-2\)                                                           
      </td></tr>

      </table>

 </div></div>

希望这会有所帮助。

Answer 2

.ctr {
    margin-left: auto;
    margin-right: auto;
}

<span class="ctr"><span class="lft">\(1+2\ \) </span> \(=\) <span class="lft"> \(\ 3\)</span></span><br>
<span class="ctr"><span class="lft">\(1+5\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span><br>
<span class="ctr"><span class="lft">\(1 + 3 + 2\ \) </span> \(=\) <span class="lft"> \(\ 6 + 2 - 2\)</span></span>

您可以执行以下操作：

这将做两件事：使<span>居中，并使它们响应。

如何使文本与CSS相对对齐？

2 个答案: