Question

我正在尝试在同一行中按顺序对齐hr标记，图像和hr标记。

到目前为止我的代码

<div class="arrow">
   <hr class="left">
   <img src="http://bit.ly/100X8XQ" height="10" width="10">
   <hr class="right">
<div>

CSS：

.arrow {
    margin-top: 20px;
}

.left {
    martin-left: 20px;
}

img {
    display: inline-block;
}

.right {
    martin-right: 20px;
}

我尝试过显示：多个位置的内联块，但我无法让它工作。有没有办法解决它？

http://jsfiddle.net/ceobm2he/

Answer 1

有点奇怪的要求。 <hr>具有语义含义，不应仅用于仅限样式用途。设计中的线通常通过边框/轮廓完成。

但这是你可能想要的：

＆＃13;

.arrow{
}

.left{
    margin-right:20px;
    float: left;
    width: 46%;
}

img{
    float: left;
}

.right{
    margin-left:20px;
    float: right;
    width: 46%;    
}

＆＃13;

<div class="arrow">
   <hr class="left">
   <img src="http://bit.ly/100X8XQ" height="10" width="10">
   <hr class="right">
<div>

＆＃13;

Fiddle here。

注意：单词＆＃34; marGin ＆＃34;在你的代码中。

Answer 2

你可以在图像上设置负边距

DEMO http://jsfiddle.net/ceobm2he/2/

img{
    display: block;
    margin:-6px auto 0 auto;
}
.left {
    margin:0 20px;
}

如果你想在图像周围留出一些空间，那么添加一些填充和背景样式

DEMO http://jsfiddle.net/ceobm2he/4/

Answer 3

使用calc计算hr代码宽度的另一个版本：

＆＃13;

.arrow > * {
    display: inline-block;
}
.arrow hr {
    width: calc(50% - 45px); /* 45px = desired margin left + right */
}
.arrow .left {
    margin-left: 20px;
}
.arrow img {
    margin: 0;
    margin: 0 10px;
}
.arrow .right {
    margin-right: 20px;
}

＆＃13;

<div class="arrow">
    <hr class="left" />
    <img src="http://bit.ly/100X8XQ" height="10" width="10" />
    <hr class="right" />
</div>

＆＃13;

注意：所有主流浏览器都支持calc功能，包括IE9 +。

将hr标签和img标签对齐在一条线上

3 个答案: