강제 인라인 요소에 배경색을 적용하고 싶습니다 .Ie7에서 배경색을 표시하지만 firefox4에서는 색상이 표시되지 않습니다. 왜 그런가요? 어떻게 정렬합니까?firefox4에서 li 배경색을 표시 할 수없는 이유는 무엇입니까?
Jsfiddle http://jsfiddle.net/ybYxq/
<ul id="in">
<li><h1>sfffffh</h1></li>
<li><h1>QssssfffffhQ</h1></li>
<li><h1>ZssssssZ</h1></li>
</ul>
CSS #in 리튬 {배경 : # 0CF; 디스플레이 : 인라인;} #in {플로트 : 오른쪽;}
비멀이 시도.
li에서 h1 태그를 제거하고 글꼴 스타일을 li에 추가하십시오.
CSS가 있어야합니다.
#in li{background-color:#171817;display:inline; color: white; font:12px Tahoma;}
#in{float:right;}
html로는이 ... 일을 그냥 날 논평 문제를하려고합니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<ul id="in">
<li>sfffffh</li>
<li>QssssfffffhQ</li>
<li>ZssssssZ</li>
</ul>
</body>
</html>
해야한다. 좋은 하루 되세요 ...
사용 클래스 대신. 당신은 li에 신청 하나 h1에도 신청해야합니다!
또한 사실이 하나
에 리에서 모든 것을
.in li *{background-color:red; display:inline;}
좀 더 예를 적용 할 * 사용할 수 있습니다, 그것은에서 작동하지 않습니다 크롬도.
시도 : #in 리튬 {배경 : #의 b2b2b2;} #in {플로트 : 오른쪽;}
또는 중 하나 #in 리튬 {디스플레이 : 인라인 블록; 배경 : # b2b2b2;} #in {float : right;}
두 번째로 잘 기억하는 IE의 문제가 있습니다.
당신은 display: inline; background:#0CF에 h1의 설정 대신 li들에 설정하여 모든 브라우저에 IE7에서 무슨 일 다시 만들 수 있습니다 :
"인라인"내부의 "뭉툭한"h1이 어떻게 든 방해 받고있는 것처럼 보입니다. 추가하는 경우 :
#in li h1 { display:inline; }
적어도 Firefox 5 이상에서는 배경 정보를 얻을 수 있습니다.
일반적으로 인라인 요소의 스타일은 요소를 차단하기 위해 캐스케이드되지 않습니다. (IE7은 약간 버그가 있습니다.) h1을 스팬 (또는 h1을 인라인으로 설정)으로 변경하면 모든 것이 작동합니다.
나의 크롬은 그것을 나타내지 않는다. .. 그? – ppumkin
대신 클래스를 사용하고 이것을보십시오. http://jsfiddle.net/ppumkin/ybYxq/1/ – ppumkin
코드가 작동하지 않는 이유에 대해 설명 할 수 있습니까? –