Question

在有序列表中的一行上，我有一个图形链接，然后是图形旁边的文本。我希望将文本放在与其相邻的图形下方。

这是我的代码：

 <ol id="resources">
       <li><a href="http://trbc.org" target="_blank"><img src="images/trbc.png" alt="Thomas Road Baptist Road Chruch"></a>Thomas Road Baptist Church</li>
       <li><a href="http://www.redeemerlynchburg.org/wp/" target="_blank"><img src="images/redeemerLogo.png" alt="Redeemer Presbyterian Chruch"></a>Redeemer Presbyterian Church</li>
       <li><a href="http://www.onecc.org/" target="_blank"><img src="images/oneLogo.png" alt="One Community Chruch"></a>One Community Church</li>
       <li><a href="http://rgbaptist.org/" target="_blank"><img src="images/graceLogo.png" alt="Redeeming Grace Church"></a> Redeeming Grace Church</li>
       <li><a href="http://www.hbclynchburg.com/" target="_blank"><img src="images/heritageLogo.png" alt="Heritage Baptist Church"></a>Heritage Baptist Church</li>
 </ol>

有没有人有建议？

Answer 1

br标签虽然在这种情况下很方便，但在开始进入响应式设计时，在语义上并不具有相应性，也不是非常灵活

http://html5doctor.com/element-index/#br

更好的解决方案是使用CSS并使链接推送自身下方的内容。

https://jsfiddle.net/3spthgs2/

#resources a{
    display: table-cell;
}

display：使用table-cell是因为display：block会使链接占用它的父级的全部宽度，而且空格是可点击的

Answer 2

<ol id="resources">
       <li>
         <a href="http://trbc.org" target="_blank">
           <img src="images/trbc.png" alt="Thomas Road Baptist Road Chruch"></a>
  </br>
Thomas Road Baptist Church</li>
       <li><a href="http://www.redeemerlynchburg.org/wp/" target="_blank"><img src="images/redeemerLogo.png" alt="Redeemer Presbyterian Chruch"></a>
  </br>
Redeemer Presbyterian Church</li>
       <li><a href="http://www.onecc.org/" target="_blank"><img src="images/oneLogo.png" alt="One Community Chruch"></a>
  </br>
One Community Church</li>
       <li><a href="http://rgbaptist.org/" target="_blank"><img src="images/graceLogo.png" alt="Redeeming Grace Church"></a> </br>
Redeeming Grace Church</li>
       <li><a href="http://www.hbclynchburg.com/" target="_blank"><img src="images/heritageLogo.png" alt="Heritage Baptist Church"></a>
  </br>
Heritage Baptist Church</li>
 </ol>

你是好人，你只需要写下你的休息元素作为一个自我结束元素，如上所述在元素中使用斜杠。

Answer 3

Thomas Road Baptist Church

救赎主长老会

一个社区教会

赎回恩典教会

Heritage Baptist Chu

＆＃13;

 <ol id="resources">
       <li><a href="http://trbc.org" target="_blank"><img src="images/trbc.png" alt="Thomas Road Baptist Road Chruch"></a>
<div style="clear:both"></div>Thomas Road Baptist Church</li>
       <li><a href="http://www.redeemerlynchburg.org/wp/" target="_blank"><img src="images/redeemerLogo.png" alt="Redeemer Presbyterian Chruch"></a><div style="clear:both"></div>Redeemer Presbyterian Church</li>
       <li><a href="http://www.onecc.org/" target="_blank"><img src="images/oneLogo.png" alt="One Community Chruch"></a><div style="clear:both"></div>One Community Church</li>
       <li><a href="http://rgbaptist.org/" target="_blank"><img src="images/graceLogo.png" alt="Redeeming Grace Church"></a><div style="clear:both"></div>Redeeming Grace Church</li>
       <li><a href="http://www.hbclynchburg.com/" target="_blank"><img src="images/heritageLogo.png" alt="Heritage Baptist Church"></a><div style="clear:both"></div>Heritage Baptist Church</li>
 </ol>

＆＃13;

或者，您可以尝试使用清晰的两种样式弹出DIV标记，如上所示。

Answer 4

在图像和文本之间添加间隔后，您还可以通过将图像添加到图像来相对于文本移动图像：

    style="float:left; margin: 0px 5px 5px 5px"

您的图片代码如下所示：

    <img src="images/trbc.png" alt="Thomas Road Baptist Road Chruch" style="float:left; margin: 0px 5px 5px 5px" />

根据文本和图像在页面上的位置，您可能需要浮动：向右而不是浮动：向左。操纵边缘图像周围空间的顺序是逆时针的，是顶部，右侧，底部，左侧。中断将移动图片下方的文本，但需要其他说明才能相对于文本进行定位。如果不知道图像相对于其下方文本的实际大小，则很难提供所需间距的建议。

我希望这为您提供另一种控制图像的选项。

在有序列表中放置换行符

4 个答案: