Question

css<div>中文字位置无法左对齐

有一个父容器
#content
{
width:960px;
border-bottom: 2px solid #FFFFFF;
border-top: 2px solid #FFFFFF;
}
它有两个子容器
#leftside
{
width:240px;
background-color: #743481;
float:left;
}

#main
{
left: 240px;
background-color: #FFFFFF;
position: relative;
margin: 0 0 0 5px;
width: 715px;
text-align: left;
}
html代码：
<div id="content">
<!--内容-->
<div id="leftside">
<!--首页左边-->
<div class="leftside_main">
<ul>
<li><span><a href="javascript:test()">首页</a></span></li>
<li><span><a href="javascript:test()">2012年12月16日</a></span></li>
</ul>
</div>
</div>
<div id="main">
测试文本
</div>
<div class="clearfloat">
</div>
</div>
结果“测试文本”在main中的位置为距main左边框240px的位置上了。如何修正？？

Answer 1

#main
{
left: 240px;
background-color: #FFFFFF;
position: relative;
margin: 0 0 0 5px;
width: 715px;
text-align: left;
}
这里你定义了距离左边240px，也就是left:240px这一句。把它去掉或者注释掉即可。

追问

去掉之后效果变成了main和content左边对齐了，然后main里面的文字相对main的边框位置还是没有变····

追答

那你可以使用一个padding-left:240px;
把width:715px;变成width:475px;
也就是
#main
{
padding-left: 240px;
background-color: #FFFFFF;
position: relative;
margin: 0 0 0 5px;
width: 475px;
text-align: left;
}

不知道你main里面到底要相对main左侧240px还是5px如果是5px的话，把margin改成padding即可

问问题，把自己想要的效果表述清楚点！
或许你是想要如下效果：

#content
{
width:960px;
border-bottom: 2px solid #FFFFFF;
border-top: 2px solid #FFFFFF;
}
#leftside
{
width:240px;
background-color: #743481;
float:left;
}
#main
{
float:left;
background-color: #FFFFFF;
margin: 0 0 0 5px;
width: 715px;
text-align: left;
}

Answer 2

leftside和main两个div要加浮动属性：
float：left；
父容器加position属性relative

Answer 3

你想让，测试文本跟上面首页什么的垂直对齐，还是什么效果

追问

和main的左边框对齐