Question

我创建了一个jsfiddle for this，下面是示例HTML和CSS。

我删除了边距，填充，并且我已将所有内容设置为内联显示，但我不能让每个锚点并排放置。

我已经尝试了所有我希望工作的东西，但CSS通常不会达到我的预期。

对此有任何帮助或见解将不胜感激。

HTML：

<dl>
  <a href="#">
    <dt>One</dt>
    <dd><img src="//imageshack.us/a/img22/2964/puppies4.jpg" height='100' width='100' /></dd>
  </a>
  <a href="#">
    <dt>Two</dt>
    <dd><img src='//imageshack.us/a/img519/5132/im20cagnolininu8.jpg' width='100' height='100' /></dd>
  </a>
</dl>

CSS：

dl { 
    border: 1px solid yellow;
    a {
        border: 1px solid green;
        display: inline;
        margin: 0;
        padding: 0;

        dt,dd { margin: 0; padding: 0; display: inline;}
    }
}

Answer 1

你的CSS结构错误（嵌套括号），修复它，一切看起来都不错。在您的jsfiddle中，此错误也会出现。

dl { 
    border: 1px solid yellow; }

a {
            border: 1px solid green;
            display: inline;
            margin: 0;
            padding: 0; }

dt,dd { margin: 0; padding: 0; display: inline;}

Answer 2

有两种方法可以让它水平显示。

1）将锚标签显示从内联更改为内联块。 2）将左浮动添加到锚标记

我认为第一个将更容易实现，因为您不需要处理浮动导致的第二种方式的折叠dl元素。

如何获取包含在锚点中的定义列表以水平显示

2 个答案: