SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?
    Attached Images Attached Images

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We can't see your attachment ttl...
    Have you just tried adding a small amount of left padding or margin?

    Barry
    The more you learn.... the more you learn there is more to learn.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Here's one way you could do it:

    Code:
    <!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. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh . . . thanks so much. Excellent fixes.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I was surprised that no one mentioned this is a PREFECT scenario for using float/overflow:hidden

    Code:
    <!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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •