html - 如何让包裹在 anchor 中的定义列表水平显示

Question

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

我已经删除了边距和填充，并且我已经将所有内容设置为内联显示，但我无法让每个 anchor 并排放置。

我已经尝试了所有我期望的工作方式，但 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;}