Want text on same line with icons but wrap like an inline-block

HTML & CSS
1

I have a ul where each li has two icons and then some text. The HTML is similar to this:

<ul>
<li><a href=“”>Icon #1</a> <a href=“”>Icon #2</a> <span>Other stuff that I want to appear on the same line as the icons but behave like an inline-block, i.e., wrap under itself instead of under the icons</span></li>
</ul>

When the text needs to wrap, I’d like to have it wrap back under itself, not under the icons. I tried using inline-block but that creates a new line for the span. How can I make it look like the mockup?

2

We can’t see your attachment ttl…
Have you just tried adding a small amount of left padding or margin?

Barry

3

Hi,

You can use inline-block but you will need to give it a width that fills the remaining space otherwise like a float it will try to claim 100% when stretched and then drops to a new line.


li{width:400px;}
span{
	display:inline-block;
	vertical-align:top;
	width:200px;
	padding:0 0 0 10px;
}
4

Here’s one way you could do it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
	
<style media="all">
a {width: 20px; height: 20px; position: absolute; background: red;}
img {width: 20px; height: 20px;}
ul {list-style: none;}
li {position: relative; border-bottom: 1px solid #e7e7e7; padding: 4px 0 4px 60px;}
.edit {left: 0px;}
.delete {left: 25px;}
</style>
</head>

<body>

<ul>
<li><a class="edit" href=""><img src=""></a> <a class="delete" href=""><img src=""></a> Other stuff that I want to appear on the same line as the icons but behave like an inline-block, i.e., wrap under itself instead of under the icons</li>
</ul>

</body>
</html>
5

Ahhhh . . . thanks so much. Excellent fixes.

6

I was surprised that no one mentioned this is a PREFECT scenario for using float/overflow:hidden


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
			.icoList {margin:0; padding:0; list-style: none;}
			.icoList li {border-bottom: 1px #ccc solid; padding:.5em}
			.icoList li > a {float:left; width:25px; height:25px; margin-right:1em }
			.icoList li > a, .icoList li> span, .icoList li { overflow: hidden;}
			.icoList li>span{padding-left:1em; display:block;}
			
			 /*Image replacement for accesibility*/ 
			.icoList li > a:before {content:url(iconHORIZONTALsprite.png) }
			.icoList li > a + a:before{margin-left:-30px;}
 		</style>
	</head>
	<body>
	
	
			<ul class='icoList'>
			<li><a href="#">Edit</a> <a href="#">Delete</a> <span>Other stuff that I want to appear on the same line as the icons but behave like an inline-block, i.e., wrap under itself instead of under the icons</span></li>
			<li><a href="#">Edit</a> <a href="#">Delete</a> <span>Short line and stuff</span></li>
			<li><a href="#">Edit</a> <a href="#">Delete</a> <span>Short line and stuff</span></li>
			<li><a href="#">Edit</a> <a href="#">Delete</a> <span>Short line and stuff</span></li>
			<li><a href="#">Edit</a> <a href="#">Delete</a> <span>Short line and stuff</span></li>
			</ul>
 	</body>
</html>

Completely fluid, friendly for screen readers, et all.