목록 항목을 특정 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> 

그 다음 단지에 상관없이 각 사업부에 넣어 어떤 특정 폭에 모든 것을 유지되지 않습니다.

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*/ 
}