将列表项对齐到某个x位置

Question

我正在尝试创建一个包含角色和名称的个人资料页面，但每个名称的长度都不同，因此它们显然不对齐。我试图将它们与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

我建议将列表更改为内联块并在其上使用最小宽度属性

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

Answer 2

所以，有几种方法你可以做到这一点，如果你没有限制使用UL那些，我会建议只使用div并将它们分配到一个宽度并将它们漂浮正确.. ..这里的例子：

<div style="float:left; width: 200px;"><strong>Frank Sinatra</strong></div>
<div style="float:left; width: 200px;"><strong>Owner / Web Master</strong></div>

无论你在每个div中放置什么，它都会保持一定的宽度。

Answer 3

#left-box ul li{
    display:inline-block;/*should be inline-block*/
    list-style-type:none;
    padding-left:0;
    padding-right:80px;
    font-size:20px;
    width: 200px; /*assign a fixed width*/
}