이상한 주문 목록

나는 이상한 주문 목록을 만들어야하는데, 어떻게해야할지 모르겠다. 이상한 주문 목록

이

나는 모든 길을 보인다

ol.container li span{float:left;} 
ol.container li div{float:left;padding-left:20px}

  <ol class="container"> 
       <li> 
       <span>Order: <strong><a href="#">59179</a></strong></span> 
       <div>Order Date: <strong>04/29/2013</strong></div> 
       <div class="clear"></div> 
       Status: <strong>In Process</strong> 
       </li> 
      </ol>

...

enter image description here

이는 HTML입니다위한 CSS를 모양 찾고되는 전 1.을 제외하고는 무엇인가의 이유로 오른쪽으로 떠 있습니다. 내가 뭘 놓친 거지 ...

enter image description here

출처

2013-08-26 Travis

당신은 전체 CSS 또는 URL을 공유 할 수 있을까? – Unknown

플로트가 없으면 세로로 늘어서 있습니다. – Gloria

. 나는이 CSS를 몇 번 고쳐 썼다. 그게 바로 하단 스크린 샷처럼 보이게하는 전부다. – Travis

당신은 아마 정렬 된 목록 내부의 범위와 div를 함께 float: left를 사용하지 않습니다. 비 clear div에 display: inline-block을 사용하면 운이 더 좋을 것입니다. 예를 들어 :

ol.container li span{ } 
ol.container li div { display: inline-block;} 
ol.container li div.clear { display: block;}

http://jsfiddle.net/SiCurious/CgQgp/

출처

2013-08-26 18:36:46

나는 덕분에 일을 복잡하게 만들었다. – Travis

걱정할 필요는 없지만 CSS를 사용하는 경우가 많습니다. IE6와 IE7은 div에서'inline-block '을 지원하지 않는다는 것에주의하십시오. 내 대답이 도움이된다면, 당신이 그것을 받아 들일 수 있다고 표시 할 수 있다면 매우 감사 할 것입니다. 만약에 당신이 할 수 있으면 많은 감사, 미래의 행운을 빕니다 :) –

답변을 수락에 지연 죄송합니다. 게시물 잊어 버린 종류. 당신이 내 질문에 찬성표를 던질 수 있다면, 나는 어떤 이유에서든 질문을하는 것을 금지 당했다. 왜 그런지 모르겠다. – Travis

이상한 주문 목록

답변

관련 문제