<a>和<img>不在同一行怎么办?

Posted 2023-03-30

<div style="width:280px;word-wrap:break-word;">
<ul>
<li>
<span style="float:left;">test</span>
<a style="float:left;">
test2test2test2test2test2test2test2tset2test2test2
</a>
<img src="imge/new_nav.gif" style="float:left" />
</li>
</ul>
</div>

HTML代码如上
<a>里面的内容导致超过<div>的宽度时
超过的部分自动换行
但<img>又另换一行.到<a>的下面去了
怎么使他们始终在一行上面?

1.让width自动适应
<div style="width:auto;">
<ul>
<li>
<span style="float:left;">test</span>
<a style="float:left;">
test2test2test2test2test2test2test2tset2test2test2
</a>
<img src="imge/new_nav.gif" style="float:left" />
</li>
</ul>
</div>

2.用white-space:nowrap强制不换行，这样div宽会被强制撑开。注：word-wrap:break-word对有些浏览器不支持
<div style="width:280px;white-space:nowrap;">
<ul>
<li>
<span>test</span>
<a>
test2test2test2test2test2test2test2tset2test2test2
</a>
<img src="imge/new_nav.gif" />
</li>
</ul>
</div>

3.让多余的部分隐藏
<div style="width:280px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
<ul>
<li>
<span>test</span>
<a>
test2test2test2test2test2test2test2tset2test2test2
</a>
<img src="imge/new_nav.gif" />
</li>
</ul>
</div> 参考技术A 插入的图片本来就是自取一行的
你可以通过调整图片的对齐方式就可以了

也可以在设计区在图片与文字之间 Dle 就可以同行了