0

我为此创建了一个 jsfiddle，下面是示例 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;}
    }
}​
4

2 回答 2

3

你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;}
于 2012-10-25T10:58:46.037 回答
1

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

1) 将锚标签显示从 inline 更改为 inline-block。2）向锚标签添加左浮动

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

于 2012-10-25T10:59:16.213 回答