Question

使用下面的css样式将水平显示锚标记列表。

但是，我似乎无法在每个列表项中显示图像和文本。关于如何做到这一点的任何建议。

谢谢

我解决问题的方法

<html>
<head>
<style type="text/css">
li
{
display:inline;
}

table
{
display:inline;
}
</style>
</head>
<body>
<ul> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">one</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">two</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">three</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">four</a></tr>
</table>
</li> 
<li>
<table>
<tr><a href="#"><img /></a></tr>
<tr><a href="#">five</a></tr>
</table>
</li>
</ul>
</body>
</html>

Answer 1

您可以在文字前添加<br />，如下所示：

<ul>
  <li><a href="#"><img /><br />one</a></li>
  <li><a href="#"><img /><br />two</a></li>
  <li><a href="#"><img /><br />three</a></li>
  <li><a href="#"><img /><br />four</a></li>
  <li><a href="#"><img /><br />five</a></li>
</ul>

将CSS更改为：

li {
  display: inline-block;
  list-style-type: none;
}

Answer 2

图像高度是否相同？如果是这样，您可以将line-height值应用于li a规则。你可能不得不摆弄它以找到合适的价值，但这样可行。

在列表项中垂直对齐图像和文本

2 个答案: