부모 목록을 간격하지 않고 어린이 목록을 표시하는 데 도움이 필요합니다.

StackOverflow https://stackoverflow.com/questions/321477

  •  11-07-2019
  •  | 
  •  

문제

나는 우리가 제공하는 대학 전공 목록을 인쇄하고 있으며, 각 전공 내에서 각 전공에 대한 집중력이 있습니다.

우리의 과학 전공은 환경 과학 및 임업, 카이로 프랙틱, 화학, 생물학

다음은 다음과 같은 스크린 샷입니다.alt text

나는 그것이 표시되는 간격을 원하지 않습니다 (나는 인적 자원 관리 AAS와 심리학 후에 보는 간격을 원하지 않습니다.) 스크린 샷에서 도움이 감사합니다.

소스는 다음과 같습니다.

.col-middle .majors-list li {
  list-style-type: none;
  width: 50%;
  float: left;
  margin-bottom: 2px;
}

.col-middle ul.majors-list {
  margin-left: 0;
}

.col-middle ul.concentrations-list {
  overflow: auto;
}

.col-middle .concentrations-list li {
  float: none;
}
<ul class="majors-list">
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
  <li>Major
    <ul class="concentrations-list">
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
      <li>Concentration Item</li>
    </ul>
  </li>
</ul>

도움이 되었습니까?

해결책

JavaScript가 없으면이 작업을 수행 할 수 없습니다. Mozilla 또는 WebKit을 사용하면 사용할 수 있습니다-[Moz | WebKit] -Column-Count : 2; 그러나 그조차도 주어진 CSS가 거의 당신에게 제공하는 것과 동일한 솔루션을 제공하지는 않습니다. 즉, 순서는 수평 대신 수직이 될 것입니다. 열 계산 속성을 가지고 놀 때, 내부 목록이 열에서 나뉘어졌으며,이 목록도 적절하지 않다고 생각합니다.

jQuery와 같은 프레임 워크로 쉽게 달성 될 수 있다고 생각하는 JavaScript 솔루션은 아마도 각 LI 요소를 취하고 상대와 위치 : 절대 속성과 약간의 수학의 조합으로 동적으로 배치 할 것입니다.

다른 팁

float : float 대신 오른쪽 : 왼쪽.

이것은 Firefox 2에서 작동합니다. 다른 브라우저에서는 작동하지 않습니다.

농도-목록 클래스 A를주고 싶습니다 display: none; CSS의 재산. 그런 다음 클래스를 농도-목록 촬영으로 바꾸고 CSS에 농도 목록을 부르는 클래스를 추가하고 display: block; 재산.

CSS3 열로이 작업을 수행 할 수 있지만 작업하려면이 문제가 필요하다고 생각합니다. 저것 브라우저.

당신이 시도 할 수있는 한 가지는 ul.majors-list 디스플레이를 만드는 것입니다 : 인라인; (또는 인라인-블록) 및 플로트 : 왼쪽; 그것 5월 일하다.

위의 내용은 "당신을 만들어보십시오 ul.Majors-list li 디스플레이 : 인라인; ". 그러나 나는 그것을 빨리 놀러 다니는 것만으로도 일할 수 없다. 당신은 당신이 가장 큰 UL을 없애지 않고 각각을 그들의이를 수행 할 수 있을지 잘 모르겠다. 자신의 목록.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top