0

嗨，我正在使用下面的代码，我的文本没有在 Li 中水平对齐。HTML 代码：

        <body>
<div id="image_header">
<img src="header.jpg" width="500" height="54" />
</div>
<div id="header">
<div id="left_panel">
<h2 id="heading" align="cente">Welcome to the <br />
Help Center</h2>

 <div id="image_src" align="center">
 <img src="Doc_image.jpg" align="middle" />
 </div>
</div>
<div id="right_panel">
<p><strong>
xxx</strong>
</p>
</div>
</div>
<div id="footer">
<div id="left_footer">
<div id="img_left">
<img src="separator_bar.jpg"/>
</div>
<div>Help Topics &nbsp;&nbsp;&nbsp;</div>
<br />
<div id="left_list">
<ul >
<li>General Information</li>
<li>Getting Started</li>
<li>Functions</li>
<li>Additional Features</li>
</ul>
<br />
</div>
</div>
<div id="right_footer">
<div id="img_right">
<img src="separator_bar.jpg" />
</div>
<div>Manuals &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</div>
<br />
<div id="right_list">
<ul>
<li>Guide</li>
<li>&nbsp;&nbsp;&nbsp;User Guide</li>
</ul>
<br />
</div>
</div>
</div>

CSS：

 div {
    background-color:#ebeff5;
}

#image_header{
    background-color:#FFF
}

#header,#footer {
    width:500px;
    position:relative;
    overflow:hidden;


    }

#left_panel,#left_footer{
    width:250px;
    float:left;
    text-align:center

    }

#right_panel,#right_footer{
    width:250px;
    float:right;
    text-align:center

}

#left_panel h2{
    color:#002e5c;
    font:Arial, Helvetica, sans-serif
}

#right_panel p {
    letter-spacing:-1px;
    padding:0px 10px;
    font:Arial, Helvetica, sans-serif;
    color:#002e5c
}

#left_list ul,#right_list ul{
    list-style-position:inside;
    list-style-type:none;
    padding:0px;
    margin:0px;


}

#left_list ul li,#right_list ul li{

    background-image:url(web%20bullet.jpg);
    background-repeat:no-repeat;
    background-position:55px 5px; 
    padding-left:15px;


}

请建议附上图片！项目清单

4

4 回答 4

0

修复：

background-position:0px 5px; 
padding-left:20px;
于 2013-04-19T21:17:34.967 回答
0

干得好

在 JS 小提琴中

        <body>
<div id="image_header">
<img src="header.jpg" width="500" height="54" />
</div>
<div id="header">
<div id="left_panel">
<h2 id="heading" align="cente">Welcome to the <br />
Help Center</h2>

 <div id="image_src" align="center">
 <img src="Doc_image.jpg" align="middle" />
 </div>
</div>
<div id="right_panel">
<p><strong>
xxx</strong>
</p>
</div>
</div>
<div id="footer">
<div id="left_footer">
<div id="img_left">
<img src="separator_bar.jpg"/>
</div>
<div>Help Topics &nbsp;&nbsp;&nbsp;</div>
<br />
<div id="left_list">
<ul >
<li>General Information</li>
<li>Getting Started</li>
<li>Functions</li>
<li>Additional Features</li>
</ul>
<br />
</div>
</div>
<div id="right_footer">
<div id="img_right">
<img src="separator_bar.jpg" />
</div>
<div>Manuals &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</div>
<br />
<div id="right_list">
<ul>
<li>Guide</li>
<li>User Guide</li>
</ul>
<br />
</div>
</div>
</div>
</body>

CSS

 div {
    background-color:#ebeff5;
}

#image_header{
    background-color:#FFF
}

#header,#footer {
    width:500px;
    position:relative;
    overflow:hidden;


    }

#left_panel,#left_footer{
    width:250px;
    float:left;
    text-align:center

    }

#right_panel,#right_footer{
    width:250px;
    float:right;
    text-align:center

}

#left_panel h2{
    color:#002e5c;
    font:Arial, Helvetica, sans-serif
}

#right_panel p {
    letter-spacing:-1px;
    padding:0px 10px;
    font:Arial, Helvetica, sans-serif;
    color:#002e5c
}

#left_list ul,#right_list ul{
    list-style-position:inside;
    list-style-type:none;
    padding:0px;
    margin:0px;


}

#left_list ul li,#right_list ul li{

    background-image:url(http://katewhittington.com/wp-content/uploads/2012/04/bulletpoint.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:15px;
    text-align:left;


}

#left_list{margin-left:78px;}
#right_list{margin-left:68px;}

希望这可以帮助。

于 2013-05-07T05:00:05.163 回答
0

从您上传的图片看来，您正在寻找这个：

JSFIDDLE 演示

<div id="left_list">
    <ul>
        <li>General Information</li>
        <ul>
            <li>Getting Started</li>
            <ul>
                <li>VIWeb Functions</li>
            </ul>
        </ul>
        <li>Additional Features</li>
    </ul>
</div>
于 2013-04-19T20:58:59.623 回答
0

我添加text-align:left到ul和li

#left_list ul,#right_list ul{

    list-style-type:none;
    padding:0px;
    margin:0px;
    text-align: left;

}

#left_list ul li,#right_list ul li{
    background-image:url(web%20bullet.jpg);
    background-repeat:no-repeat;
    background-position:55px 5px; 
    padding-left:15px;
    text-align: left;
}
于 2013-04-19T21:11:32.553 回答