BIOS,Windows, Linux, Software,Security, Domains, Web Hosting

How to Fixe Span Width in CSS

In this post, I give some examples for fixed width span, including independent line fixed width, same line fixed width and same line with centered style fixed width.

1. Like <span>ABC</span> SPAN fixed width

CSS style:

span {width:60px; text-align:center; display:block; }

Test Example:

<style type="text/css">
.sa span {width:150px; text-align:center; display:block; background:#C00;margin:10px 0px 0px 0px;color:#FFF;font-size:15px;}
</style>
<div class="sa">
    <span>Hello</span>
    <span>Hello CSS</span>
    <span>Hello CSS SPAN</span>
</div>

Result:

2. Like <span>ABC</span>DEF SPAN fixed width

CSS style:

span {width:60px; text-align:center; display:block; float:left;}

Test Example:

<style type="text/css">
.sb {width:350px;list-style:none;font-size:15px;}
.sb li {list-style:none;width:100%;margin:10px 0px 0px 0px;}
.sb span {width:100px; text-align:center;  display:block; float:left; background:#C00;color:#FFF;}
</style>
<ul class="sb">
    <li><span>Hello</span> CSS</li>
    <li><span>Hello CSS</span> SPAN</li>
    <li><span>Hello CSS SPAN</span> !!!</li>
</ul>

Result:

3. Like ABC<span>DEF<span>GH SPAN fixed width

CSS style:

span {width:60px; text-align:center;  display:inline-block;}

Test example:

<style type="text/css">
.sc {width:300px;list-style:none;font-size:15px;}
.sc li {list-style:none;width:100%;margin:10px 0px 0px 0px;}
.sc span {width:150px; text-align:center; display:inline-block; background:#C00;color:#FFF;}
</style>
<ul class="sc">
    <li>Welcome <span>Hello</span> CSS</li>
    <li>Welcome <span>Hello CSS</span> SPAN</li>
    <li>Welcome <span>Hello CSS SPAN</span> !!!</li>
</ul>

Result:

So, We need to set display:inline-block, this attribute has better compatibility.

Related Articles

Comments(0)  

Leave a Reply

Subscribe to BootBeta Comments RSS feed to receive notification of latest comments posted.

Subscriptions

  • Enter Email Address:

Recent Post

Copyright@ 2010-2014 Bootbeta All Rights Reserved.
HooBlog Ver 1.5 Build 20140530