Question

您好我使用下面的代码，我的文字没有在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;


}

请建议附图！ List item

Answer 1

从您上传的图片中，您似乎在寻找：

JSFIDDLE DEMO

<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>

Answer 2

我向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;
}

Answer 3

修复：

background-position:0px 5px; 
padding-left:20px;

Answer 4

你去吧

In JS Fiddle

        <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;}

希望这有助于。

文字未在li中水平对齐

4 个答案: