正确地将文本包装在列表中

Question

我在尝试将列表项中的文本包装到下一行以正确显示时遇到问题。这是第一个菜单项。我检查了许多其他相关答案，但答案似乎不适合我的情况。

#menuSide ul {
  margin-left: -45px;
  text-indent: 15px;
  list-style-type: none;
}

#menuSide li {
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid #00136F;
}

#menuSide a, #menuSide a:visited {
  display: block;
  font-family: "Lucida Grande", Verdana,Arial, sans-serif;
  height: 1.2em;
  color: #fff;
  background-color: inherit;
  text-decoration:none;
}

#menuSide a:hover {
  color: #3B5998;
  background-color: #fff;
  text-decoration:none;
}

#menuSide .here {
  color: #fff;
  background-color: inherit;
  text-decoration:none;
}



<ul>
<?php
if ($thisPage=='speaking') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Speaking Engagements in Jerusalem</span>';
}
else {
  echo '<li><a href="/speaking.php">Speaking Engagements in Jerusalem</a>    </li>';
}?>

<?php
if ($thisPage=='events') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Recent Events</span>';
}
else {
  echo '<li><a href="/events/index.php">Recent Events</a></li>';
}?>
</ul>

有什么建议吗？

Answer 1

从height: 1.2em;删除#menuSide a, #menuSide a:visited会有所帮助。通过为元素设置1.2em高度，可以将其高度固定为单行内部文本高度的120％。这就是为什么第二行不合适的原因。请尝试使用line-height或padding-top和padding-bottom代替。

P.S。：您已忘记在此处关闭</li>代码：

if ($thisPage=='speaking') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Speaking Engagements in Jerusalem</span>';
}

在这里：

if ($thisPage=='events') {
  echo '<li><span class="here">&raquo;&nbsp;&nbsp;Recent Events</span>';
}