HTML/CSS에서 목록을 구성합니다

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

  •  05-09-2019
  •  | 
  •  

문제

목록이 있고 각 항목에 두 개의 섹션이 필요합니다. 또한 첫 번째 섹션이 고정 너비가 필요합니다. 어떻게 코딩해야합니까?

정의 목록을 사용해 보았습니다.

    <dl>
      <dt style="width: 2em;">foo</dt><dd>bar</dd>
    ...

    </dl>

... 그리고 스팬이있는 사용자 목록 :

    <ul>
      <li><span style="width: 2em;">foo<span>bar</li>
    ...

    </ul>

둘 다 효과가 없었습니다. 그렇게 할 수있는 정식 방법이 있습니까?

도움이 되었습니까?

해결책

내가 생각해 낸 방법은 아마도 표준이 아닐 수도 있습니다 (그러나 그것을 구현하는 '표준'수단이 있다고 확신하지 않기 때문에) 작동합니다.

    <style type="text/css" media="screen">

        #container
            {width: 50%;
            margin: 0 auto;
            }

        ol,
        ul  {border: 1px solid #ccc;
            width: 90%;
            padding: 1.4em 0;
            }

        ol li,
        ul li   {background-color: #ccc;
            margin-left: 20%;
            }

        ol li span.list-head,
        ul li span.list-head
            {background-color: #ffa;
            float: left;
            display: block;
            width: 6em;
            }

        dl  {border: 1px solid #ccc;
            line-height: 1.4em;
            padding: 1.4em 0 0 0;
            }

        dl dt   {background-color: #ffa;
            display: block;
            margin: 0;
            width: 10%;
            }

        dl dd   {background-color: #fc0;
            display: block;
            margin: 0;
            width: 88%;
            margin-left: 11%;
            position: relative;
            top: -1.4em;
            }       

    </style>
...
    <div id="container">

        <ol>

            <li><span class="list-head">Foo:</span> bar.</li>

            <li><span class="list-head">Bar:</span> baz.</li>

            <li><span class="list-head">Baz:</span> foo.</li>

        </ol>

        <ul>

            <li><span class="list-head">Foo:</span> bar.</li>

            <li><span class="list-head">Bar:</span> baz.</li>

            <li><span class="list-head">Baz:</span> foo.</li>

        </ul>

        <dl>

            <dt>Foo:</dt>
            <dd>bar.</dd>

            <dt>Bar:</dt>
            <dd>baz.</dd>

            <dt>Baz:</dt>
            <dd>foo.</dd>

        </dl>

    </div>

다음에 작동하는 데모가 있습니다. http://www.davidrhysthomas.co.uk/so/lists.html.

다른 팁

Alan이 말했듯이, 그러나 당신이 단지 div를 넣으면 원하는 방식으로 작동하지 않을 것입니다.

<ul>
  <li><div style="width: 200px; display: inline-block;">foo</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li>
</ul>

(아마도 각 목록 항목 스타일 속성을 반복하는 대신 클래스를 사용하고 싶을 수도 있습니다).

너비는 적용되지 않습니다 <span> 인라인으로 태그. 태그를 a로 교체 해보십시오 <div> 또는 <p> 또는 다른 블록 요소.

DL을 사용하고 DT를 왼쪽으로 둡니다.

<style type="text/css">
dt {clear:left; float:left; width: 8em;}
</style>

<dl>
     <dt>foo<dt>
     <dd>bar</dd>
     <dt>foo1<dt>
     <dd>bar1</dd>
     <dt>foo12345<dt>
     <dd>bar</dd>
 </dl>

첫 번째 부분에 대한 레이블 또는 인라인 DIV를 시도하십시오.

나는 다음과 같이 묻고 싶습니다 : 이것은 표 형 데이터를 나타내는 것입니까? 우리는 HTML 테이블이 사악하다고 생각하는 데 교리되었지만 데이터 테이블을 보여주기 위해 완벽합니다. 나는 둘 이상의 코더가 <table> 태그 사용 <div>S와 CSS.

물론 그렇지 않으면 계속해서 계속하십시오. :-)

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