HTML/CSS求助：<li>元素内两行文字无法对齐问题

问题截图：

我的代码 #

HTML部分 #

<!-- Side Bar Content-->
<div class="sidebar">
  <ul>
    <li><a href="Manfred.html">About me</a></li>
    <li><a href="Media.html">Media</a></li>
  </ul>
  <div class="guest">
    <ul>
      <li>Sign my <br><a href="https://fishforfree.atabook.org/?page=1"> Guestbook</a></li>
    </ul>
  </div>
</div>

CSS部分 #

body { margin: 0; font-size: 30px; font-family: "Times New Roman","arial"; color: white; background-image: url("image/misc/Textur.png"); }
a:link { color: white; text-decoration: none; }
a:visited { color: white; text-decoration: none; }
abbr { text-decoration: none; }

/* Einstellungen für Sidebar*/
.sidebar { margin: 0; padding: 0; width: 20%; right:0; background-color: rgba(0, 0, 0, 0.7); position: fixed; height: 100%; overflow: auto; font-size: 3vw; }
.sidebar ul { color: white; list-style-type: none; padding: 0; margin: 0; margin-top: auto; margin-bottom: 1vw; }
.sidebar li a { display:inline-block; margin:10px; font-size: 3.5vw; }
.sidebar li a:hover { transform:rotate(-5deg); background-color: rgba(255, 255, 255, 1); color: black; }

.guest ul { color: white; list-style-type: none; padding: 0; margin: 0; margin-top: auto; margin-bottom: 1vw; }
.guest li { display:inline-block; margin:10px; font-size: 3.5vw; }
.guest li a{ display:inline-block; font-size: 3.5vw; }
.guest li a:hover { transform:rotate(5deg); background-color: rgba(255, 255, 255, 1); color: red; }

@media screen and (max-width: 700px) {
  .sidebar { width: 100%; height: auto; position: relative; }
  .sidebar ul { margin-bottom: auto; float: left; }
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar ul { text-align: center; float: none; }
  .sidebar ul { margin-bottom: auto; }
}

问题原因 #

.guest li a设置了margin:10px，这会给<a>标签添加上下左右各10px的外边距。第二行的"Guestbook"嵌套在这个带左外边距的<a>里，自然比第一行的"Sign my"偏右，导致首字母无法对齐。

修复方案 #

方案1：调整的外边距，仅保留垂直间距 #

修改.guest li a的margin属性，只保留上下方向的间距，去掉左右间距：

.guest li a{
  display:inline-block;
  font-size: 3.5vw;
  margin: 10px 0; /* 上下10px，左右0 */
}

方案2：统一文本容器，确保样式一致 #

把"Sign my"和"Guestbook"放在同一个<a>标签内，用<br>换行，让两行文本继承相同的样式：

<li><a href="https://fishforfree.atabook.org/?page=1">Sign my <br>Guestbook</a></li>

同时确保<li>文本左对齐：

.guest li {
  display:inline-block;
  margin:10px;
  font-size: 3.5vw;
  text-align: left;
}

额外优化 #

如果侧边栏的列表是垂直排列，将.guest li的display改为block更合理，避免inline-block带来的布局干扰：

.guest li {
  display: block;
  margin:10px;
  font-size: 3.5vw;
}

内容的提问来源于stack exchange，提问作者user32795573