在链接列表中的每个图像下添加不同的文本链接

Question

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

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

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%; 
 

 
}

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

如果你想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>

Answer 2

设置照片类（.photos）宽度150像素左右，而不是％的宽度可以节约你的时间。

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>