网页设计中的css怎么对齐

图片说明对齐


<div style="float:left;width:200px;">
<span>hahah</span>
<span>ixixixix</span>
</div>
<div  style="float:left;width:200px;">
<span>hahah</span>
<span>ixixixix</span>
</div>

 <pre>
哈哈   哈哈
哈哈   哈哈
</pre>

或者直接打全角空格进行对齐

本来文字是这样的：
啊哈哈哈嘻嘻
噢噢噢噢噢哦哦哦哦
我想利用css做成：
啊哈哈哈 嘻嘻
噢噢噢噢噢 哦哦哦哦

图片说明做成这样对齐

看到楼主的问题及追问后，认为楼主想实现的功能是：
在页面中有很多列，每一列的元素左对齐。
方法一：使用表格
虽然现在已经不推荐使用表格布局，但如果是数据比较多而且是后台取出来的，则可使用表格设置td中的元素左对齐即可。
方法二：给每一个数据所在的元素内设置宽度及文字左对齐

<style>
    span{
        display: inline-block;
        width: 200px;
        text-align: left;
    }
</style>
<span>啊哈哈哈</span>
<span>嘻嘻</span> 
<span>噢噢噢噢噢</span> 
<span>哦哦哦哦</span>