Question

所以我一直在尝试将地址与地址左侧的font-icon对齐。我也使用了基础zurb框架。

<i class="fa fa-location-arrow fa-1x"></i><p>
        58 High Street <br />
        Harpenden Herts <br />
        AL5 2SB</p>

我是这样做的，但我想知道是否还有其他办法。

<span style="">58 High Street</span> <br />
        <span style="padding-left:18px;">Harpenden Herts</span><br />
        <spane style="padding-left:18px;">AL5 2SB</span>
        <br /><br />

http://jsfiddle.net/gpL42zbm/我使用图像持有人来说明图标。

Answer 1

在HTML中，总有“另一种方式”做事。：）

首先，你在谈论一个地址，所以我建议你考虑使用Microformats hCard / vCard来标记你的内容。还有HTML5地址标记需要考虑，但这里有两个资源。

首先将地址信息标记为微格式。

<div id="" class="vcard">
  <b class="fn n"></b>
  <div class="adr">
    <b class="street-address">58 High Street</b>
    <b class="locality">Harpenden Herts</b>
    <b class="postal-code">AL5 2SB</b>
  </div>
</div>

如果您有人名，请添加到<b class="fn n"></b>元素。如果是组织名称，请将org添加到班级名称。

旁注，在HTML5中我更喜欢使用<b>标记进行语义无意义的标记，而不是<span>，因为它只减少6个字符，我觉得它有帮助更具可读性。唯一的问题是您必须记住删除粗体字体重量的标准浏览器格式

使用上面的标记，您有足够的钩子和微语义来将CSS绑定到格式化。一个例子可能是

.vcard b { font-weight:normal; }
.vcard > .adr > .street-address, 
.vcard > .adr > .locality { display:block; }

现在，您只需要添加字体真棒图标即可。

<div id="" class="vcard">
  <b class="icon fa fa-location-arrow fa-1x"></b>
  <b class="fn n"></b>
  <div class="adr">
    <b class="street-address">58 High Street</b>
    <b class="locality">Harpenden Herts</b>
    <b class="postal-code">AL5 2SB</b>
  </div>
</div>

现在，你只需要定位它。这里有多种选择。两个常见选项是浮动元素或绝对定位它。我将绝对定位它以使地址文本更清晰。

.vcard { position:relative; padding-left:35px; }
.vcard > .icon { position:absolute; top:0; left:0; }

上面的CSS正在做的是它将position:relative样式应用于包含元素，以允许子元素轻松定位在其自身内。

然后我将图标绝对放在.vcard的左上角。由于示例小提琴使用了30x30px图标，然后我在左侧添加了35px填充以将地址内容推过并给出图标空间并避免重叠，同时给它一个小水槽。

这是一个更新的小提琴示例，上面的代码。

http://jsfiddle.net/gpL42zbm/2/

如果您想将图标放在与街道号码相同的行上，您可以使用浮点数，而不是绝对定位图标。

以下是使用float：http://jsfiddle.net/gpL42zbm/3/

的更新示例

这里的变化只是CSS：

.vcard > .adr > .street-address{ display:block; line-height:2.25; }
.vcard > .icon { float:left; margin-right:0.25em; }

首先，我向左浮动图标并给它一点右边距以分隔文字和图标以便于阅读。

然后我调整街道地址以减少线条高度（你也可以使用填充），所以使线条与图标大致相同，允许下面的线条包裹在图标下面。

当然，还有其他方法可以给猫皮肤涂抹，但是我希望这里有两种选择可以帮助你找到你想去的地方！

干杯！

约翰

font-awesome图标和p标签

1 个答案: