960 그리드 정렬 문제

Question

960 그리드에서 문제가 발생했습니다. 아래 코드는 내가 사용하고 싶은 레이아웃, 즉 6 개의 컨테이너가 균등하게 퍼져 있음을 나타냅니다.

<div class="container_12" style="background:blue";> 
    <div class="grid_2 alpha" style="background:red";> 
     Alpha 
    </div> 
    <div class="grid_2" style="background:orange";> 
     1 
    </div> 
    <div class="grid_2 " style="background:yellow";> 
     2 
    </div> 
    <div class="grid_2" style="background:green";> 
     3 
    </div> 
    <div class="grid_2" style="background:teal";> 
     4 
    </div> 
    <div class="grid_2 omega" style="background:red";> 
     omega 
    </div> 
</div> 

나는 각 그리드에 테두리를 지정하면 각 그리드에 테두리가 생기므로 정렬 문제가 발생합니다.

에 문제가 HTML 코드 메신저는 다음과 같습니다

는

<div class="container_12 "> 
    <ul class="a-tab"> 
     <li> 
      <a href="" class="grid_2 alpha">Today</a> 
     </li> 
     <li> 
      <a href="" class="grid_2">Restaurants</a> 
     </li> 
     <li> 
      <a href="" class="grid_2">Shops</a> 
     </li> 
     <li> 
      <a href="" class="grid_2">Accomodation</a> 
     </li> 
     <li> 
      <a href="" class="grid_2">Property</a> 
     </li> 
     <li> 
      <a href="" class="grid_2 omega">Nightlife</a> 
     </li> 
    </ul> 

사용하여 메신저 경계 제어를위한 CSS는 다음과 같습니다

.a-tab li{ 
    list-style-type: none; 
    display: inline-block; 
    float: center; 
    border-color: #000; 
    border-top:solid; 
    border-right: solid; 
    border-left: solid; 
    -webkit-border-top-left-radius: 7px; 
    -webkit-border-top-right-radius: 7px; 
    -moz-border-radius-topleft: 7px; 
    -moz-border-radius-topright: 7px; 
    border-top-left-radius: 7px; 
    border-top-right-radius: 7px; 
    font-size: 16px; 
    margin:0 0 0 0; 
} 

이 어떤 도움이 http://www.virtualharrogate.co.uk

에 표시됩니다 대단히 감사합니다

Answer 1

웹 사이트 (fol 귀하의 질문에 라이브 링크를 낮추는), 문제는 그리드 시스템에서 오히려 잘못된 마크 업에서 발생하지 않는 것 같습니다 - div 요소를 정렬되지 않은 목록 (ul)에 중첩합니다. 여기 웹 사이트에서 복사 한 관련 단편이다 :

<div class="container_12 "> 
    <ul> 
     <div class="grid_2 alpha"> 
      <div class="tabframe" id="tabdetail"> 
       <li> 
        <a href="">Today</a> 
       </li> 
      </div> 
     </div> 
     <!-- etcetera --> 
    </ul> 
</div> 

중 하나는 계층 구조에서 div.container_12 아래 ul 위치를 제거하거나 li들에 내포 된 div의 변경 및 문제가 해결 될 것입니다.