使用链接

Question

正如我在标题中所说，我需要在每张图片下添加不同的文字 这些图像包含在列表中并显示为内联 并连接到一个链接。 所以我需要保持图像和文本连接到同一个链接。

我尝试了这种方法，但图像以垂直列表的形式出现。

＆＃13;

＆＃13;

a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;

}
figure {
    padding: 5px;
}


img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}



.photos{
  list-style-type: none;
  padding: 0;
  text-align: center;

}


.photos li{
  display: inline;
  padding: 11px;

}  


.photos img{
  width: 20%;

}

＆＃13;

<ul class='photos'> 
            <li><figure>
<a href='first link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN1</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='second link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN2</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='third link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN3</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='fourth link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>
            <figcaption>BeIN4</figcaption>
        

</a></figure>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将照片类'（。photos）宽度设置为150px左右而不是％宽度可以节省您的一天。

a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;

}
figure {
    padding: 5px;
}


img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}



.photos{
  list-style-type: none;
  padding: 0;
  text-align: center;

}


.photos li{
  display: inline;
  padding: 11px;

}  


.photos img{
  width: 150px;

}

<ul class='photos'> 
            <li><figure>
<a href='first link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN1</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='second link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN2</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='third link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>            <figcaption>BeIN3</figcaption>
</a>
</figure></li>
            <li><figure>
<a href='fourth link'><img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png'/>
            <figcaption>BeIN4</figcaption>
        

</a></figure>
</li>
</ul>

Answer 2

如果您想要20％的宽度，请将<li>元素设置为width: 20%和display: inline-block，然后将<img>宽度更改为100％。此外，代码段编辑器还有一个整洁按钮。我建议使用它和/或习惯使用适当的缩进格式化代码。这确实有助于获得代码的可视化结构以及可能出现问题的地方：

a,
figure {
  display: inline-block;
}
figcaption {
  margin: 10px 0 0 0;
  font-variant: small-caps;
  font-family: Arial;
  font-weight: bold;
  color: #bb3333;
}
figure {
  padding: 5px;
}
img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
img {
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
}
.photos {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
.photos li {
  display: inline-block;
  width: 20%;
  padding: 11px;
}
.photos img {
  width: 100%;
}

<ul class='photos'>
  <li>
    <figure>
      <a href='first link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN1</figcaption>
      </a>
    </figure>
  </li>
  <li>
    <figure>
      <a href='second link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN2</figcaption>
      </a>
    </figure>
  </li>
  <li>
    <figure>
      <a href='third link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN3</figcaption>
      </a>
    </figure>
  </li>
  <li>
    <figure>
      <a href='fourth link'>
        <img src='http://4.bp.blogspot.com/-dmLOX0bmJbU/U0iOwbZwCrI/AAAAAAAAGp8/4wCYHr5n5Fk/s1600/BeIN_Sports.png' />
        <figcaption>BeIN4</figcaption>
      </a>
    </figure>
  </li>
</ul>