html - 将列表项对齐到特定的 x 位置

Question

我正在尝试制作一个个人资料页面，其中 Angular 色和名称排成一行，但每个名称的长度都不同，因此它们显然没有对齐。我试图将它们与 px、em 和 % 放在一起，但我找不到好的解决方案。

<div id="container-box">
    <div id="left-box">
        <ul>
            <li><strong>Frank Sinatra</strong></li>
            <li><strong>Owner / Web Master</strong></li>
        </ul>
        <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
    </div>
    <div id="right-box">
        <img src="~/images/frank.jpg" />
    </div>
</div>
<div id="container-box">
    <div id="left-box">
        <ul>
            <li><strong>john smith</strong></li>
            <li><strong>Administrator</strong></li>
        </ul>
        <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
    </div>
    <div id="right-box">
        <img src="~/images/john.jpg" />
    </div>
</div>

CSS:

#left-box
{
    float:left;
    font-size:16px !important;
    width:600px;
    overflow:auto;
    padding-right:80px;
}
#left-box li{
    display:inline;
    list-style-type:none;
    padding-left:0;
    padding-right:80px;
    font-size:20px;
}

#left-box ul{
    padding:0;
    margin-bottom:0;
}

#left-box p 
{
    padding-top:20px;
}
#right-box
{
    float:right;
    width:400px;
    overflow:auto;
}
#container-box{
    padding-bottom:20px;
    overflow:auto;
    border:1px solid #DFDFDF;
    border-radius:15px;
    margin-bottom:15px;
    padding:15px;
}
#right-box img
{
    margin-left:150px;
    margin-top:20px;
    margin-bottom:10px;
    padding:3px;
    border:1px solid black;
    border-radius:10px;
}

Answer 1

jsFiddle Demo

我建议将您的列表更改为内联 block 并在其上使用 min-width 属性

#left-box li{
 display:inline-block;
 list-style-type:none;
 padding-left:0;
 min-width:160px;
 font-size:20px;
}