"html 페이지에 나열된"계획 "이라는 시각적 요소가 있습니다. 각각의 "계획"은 작은 테이블과 이미지를 가지고 있는데, 나는 나란히 보여주고 싶다. 어떤 스타일링도없이 다음과 같이 보입니다 : http://jsfiddle.net/DCTwd/1/float 추가 : 왼쪽 나누기 목록
float: left 테이블과 이미지에 같은 행에 표시되도록 만들 수 있다고 생각했지만 작동하지 않습니다. li 안에 float: left을 사용할 수 없습니까? 다른 방법이 내가 이것을 얻을 수 있습니까?
고대에 대한 필요 없음 float:left;, display:inline-block;은 (와) 친한 친구입니다!
your updated jsFiddle. 이는 지나치게 간단한 예제이므로 실제 CSS에는 요소 기반 CSS가 아닌 클래스 기반이 포함되어야하지만 그 점을 이해할 수 있어야합니다.
IE7-의 경우 zoom:1; *display:inline;이고, 미학의 경우 vertical-align:middle;입니다. 어떤 기기 든 사용할 수있는 top 또는 bottom을 사용할 수도 있습니다.
내가 잘 CSS2.1의로 지원되는 inline-table을 사용합니다 :
table {
display: inline-table;
}
난에서 데모를 구축 : 당신은 주위에 패딩과 마진에 관심을 지불 할 필요가 http://jsfiddle.net/audetwebdesign/cYDUC/
당신의 ul 및 li 요소를 선택하고 표시하려면 왼쪽에있는 글 머리 기호를 숨 깁니다.
IE7을 지원해야하는 경우 display: inline을 사용하여 요소 주변의 여백과 여백을 조정할 수 있습니다.