Html 在一行中对齐hr标记和img标记

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

到目前为止我的代码

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

我尝试在多个位置使用display:inline块，但无法使其工作。有什么办法可以修吗

---

有点奇怪的要求。

is具有语义含义，不应仅用于样式设置目的。设计中的线条通常通过边框/轮廓完成

但这可能是你想要的：

.arrow{
}
.左{
右边距：20px；
浮动：左；
宽度：46%；
}
img{
浮动：左；
}
.对{
左边距：20px；
浮动：对；
宽度：46%；
}

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

演示

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

---

演示

使用

calc

计算

hr

标签宽度的另一个版本：

.arrow>*{
显示：内联块；
}
.arrow人力资源部{
宽度：计算（50%-45px）；/*45px=所需的左+右边缘*/
}
.箭头，左{
左边距：20px；
}
.arrow img{
保证金：0；
利润率：0.10px；
}
.阿罗，对{
右边距：20px；
}

.arrow {
    margin-top: 20px;
}

.left {
    martin-left: 20px;
}

img {
    display: inline-block;
}

.right {
    martin-right: 20px;
}

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