Question

我有一个包含许多链接的H1元素，这些链接具有唯一的类。

我需要以这样一种方式定义css类，即每个类都将它的相应图像作为背景，这将使图像成为链接。

HTML：

 <h1 class="title">
    My Title<a class="cl1" href="http://www.google.com" />
    <a class="cl2" href="http://www.google.com" />
    <a class="cl3" href="http://www.google.com" />
    <a class="cl4" href="http://www.google.com" />        
</h1>

CSS：

    .title a.cl1 {
    display:block;
    background-image: url("http://oi61.tinypic.com/2sbmuxy.jpg");
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    }

    .title a.cl2 {
    display:block;
    background-image: url("http://oi61.tinypic.com/2sbmuxy.jpg");
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    }

    .title a.cl3 {
    display:block;
    background-image: url("http://oi61.tinypic.com/2sbmuxy.jpg");
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    }

   .title a.cl4 {
   display:block;
    background-image: url("http://oi61.tinypic.com/2sbmuxy.jpg");
    background-repeat: no-repeat;
    height:40px;
    width:40px;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    }

我的问题：如何在一行中显示链接？现在彼此显示一个。

Answer 1

对display: inline-block;元素使用display: block代替a。

Answer 2

您可以在display: inline-block;元素的每个类中使用display: block;代替a。您还可以添加vertical-align: middle以使链接在h1标记中居中。

Answer 3

您需要使用：

display: inline-block;

Answer 4

display:inline-block;

跟随你想做的事情有点难，但我相信就是这样。

http://jsfiddle.net/y2gob0f6/4/

Answer 5

这是有问题的，因为您无法更改HTML。在所有float: right;元素上使用a应该有助于避免空白问题，但是您需要控制容器的宽度以确定如何保持流量并且每次都需要更新CSS内容已更新。如果您使用inline-block，您可能希望font-size: 0标记h1以避免空格，但由于您需要显示文本，因此无法执行此操作。不幸的是，inline-block可能是最安全的方式。

有关空白问题的详细信息，请参阅this link

带有链接作为背景图像的html元素h1将它们显示在一行中

5 个答案: