0

I've created a jsfiddle for this and the sample HTML and CSS is below.

I've removed the margins, the padding, and I've set everything to display inline, yet I can't get each anchor to sit side by side.

I've tried all that I would expect to work, but CSS often doesn't do what I expect.

Any help or insight with this will be much appreciated.

The 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>

The 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

Your CSS has wrong structure (nested brackets), fix that and everything should look OK. In your jsfiddle this error is also present.

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

There are two ways to get it displaying horizontally.

1) Change the anchor tags display from inline to inline-block. 2) Add a left float to the anchor tag

I think that the first will be the easier to implement as you don't need to deal with the collapsed dl element that the floating causes in the second way.

于 2012-10-25T10:59:16.213 に答える