목록 항목의 크기를 조정하여 모두 같은 크기가되도록하십시오

목록 항목을 모두 동일한 너비로 만들려고합니다. CSS에서 너비를 설정하려고 시도했지만 아무 것도 변경되지 않았습니다. 아무도 이것을 알아낼 수 있습니까? 는 여기에 대해 이야기하고있는 것을 보여주는 이미지입니다 : enter image description here 목록 항목의 크기를 조정하여 모두 같은 크기가되도록하십시오

HTML : 여기

<body> 
<div class="content-wrapper" id="container"> 
    <header>logo 
     <nav>navigation</nav> 
    </header> 
    <div class="clear-fix"></div> 
    <div id="body"> 
     <section class="main-content"> 
      <section class="leftPane"> 
        <h2>Categories</h2> 

      </section> 
      <section class="rightPane"> 
       <div class="checkout"> 
         <h1>Checkout</h1> 

        <ul class="steps"> 
         <li><a href="http://localhost:59213/Cart"> 
           <div id="step0" class="arrow_box_grey"> 
            Shopping Cart</div> 
          </a> 
         </li> 
         <li><a href="http://localhost:59213/Cart/Student"> 
           <div id="step1" class="arrow_box_grey"> 
            Student</div> 
          </a> 
         </li> 
         <li><a href="http://localhost:59213/Cart/Delivery"> 
           <div id="step2" class="arrow_box_grey"> 
            Delivery</div> 
          </a> 
         </li> 
         <li> 
          <div id="step3" class="arrow_box_green">Payment</div> 
         </li> 
         <li> 
          <div id="step4" class="arrow_box_blue">Finish</div> 
         </li> 
        </ul> 
       </div> 
      </section> 
      <div class="clear-fix"></div> 
     </section> 
    </div> 
</div>

그리고 만약 코드 내 바이올린 : 당신은 변경해야 http://jsfiddle.net/M74Em/

출처

2014-05-20 dmikester1

이 스타일 :

.main-content .checkout ul.steps li div { 
    display: inline; 
    width: 1000px; 
}

당신은 인라인 요소에 대한 폭 그래서이 시도 설정할 수 없습니다 : <ul>의 (demo)에 적용 twBootstrap에서

.main-content .checkout ul.steps li div { 
    display: inline-block; 
    width: 100px; 
}

Example

출처

2014-05-20 13:10:50 Pete

Perfect! 인라인 요소에 대해 알아 주셔서 감사합니다. – dmikester1

을 :

.ul-justified { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
} 
.ul-justified > li { 
    display: table-cell; 
    float: none; 
    width: 1%; 
}

및 UL-에 .ul-justified 때리는 목록을 정렬하고 동일한 너비를 얻으려면 <li>이 자동으로 상위 ul의 너비에 맞아야합니다.

출처

2014-05-20 13:35:49

흥미 롭습니다. 감사합니다. – dmikester1

목록 항목의 크기를 조정하여 모두 같은 크기가되도록하십시오

답변

관련 문제