在有序列表中放置换行符

Question

在有序列表的一行中，我有一个图形 link，然后是图形旁边的文本。我想让文字位于图形下方而不是旁边。

这是我的代码：

 <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

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

你是个好人，你只需要写你的break元素如上元素中带有斜线的自结束元素。

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

或者，您可以尝试在 DIV 标签中弹出一个清晰的两种样式，如上所示。

Answer 3

br 标签虽然在这种情况下很方便，但在语义上不正确，当您开始进行响应式设计时也不是很灵活

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

更好的解决方案是使用 CSS 并使 link 将内容推送到其下方。

https://jsfiddle.net/3spthgs2/

#resources a{
    display: table-cell;
}

使用

display:table-cell 是因为 display:block 会使 link 占据其父级的整个宽度并且空白可以点击

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" />

根据文本和图像在页面上的位置，您可能需要 float:right 而不是 float:left。在图像周围操作 space 的顺序是逆时针方向，即上、右、下、左。分隔符会将文本移动到图片下方，但需要额外的说明才能相对于文本定位。在不知道图像相对于其下方文本的实际大小的情况下，很难为必要的间距提供建议。

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

在有序列表中放置换行符

Placing Line Breaks in an Ordered List

html

xhtml