我试图在我的方程式中对齐等号。我尝试了 span 和 div，但如果 LHS 内容大小 > RHS 则对齐结束:
https://jsfiddle.net/gytmx256/6/
<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;}
如何对齐任何等式大小的等号？感谢您的帮助。
最佳答案
一种选择是您可以简单地使用表格并将左侧元素 float 到右侧，即 .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>希望这会有所帮助。
关于html - 如何使文本与 CSS 相对对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52087925/