내 이미지 배경이 플로트 : 왼쪽에서 사라지는 이유는 무엇입니까?

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

문제

나는 양쪽 끝에 이미지가 달린 Navbar를 만들어 순수하게 만들고 싶습니다.

그래서 아래에서 HTML과 CSS를 만들었고 훌륭하게 작동했습니다. 내 메뉴 항목은 UL/Li 목록에 있습니다.

목록을 하나의 줄에 놓기 위해 목록을 스타일링하면 끝의 이미지가 사라집니다. 그게 무슨 일이야? 어떻게 수정합니까?

범인은 부유물입니다 : 왼쪽; 아래에.

--- test.html ---

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div id="container">
        <div id="header-usernav" class="span-6 last large">
            <div id="header-usernav-leftside"><div id="header-usernav-rightside">
                <ul>
                    <li>Register</li>
                    <li>Signin</li>
                    <li>Signout</li>
                </ul>
            </div></div>
        </div>
    </div>
</body>
</html>

--- test.css ---

#container #header-usernav {
    background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
    height: 28px;
    background-repeat: repeat;
}
#container #header-usernav-leftside {
    background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
    background-position: top left;
    background-repeat: no-repeat;
}
#container #header-usernav-rightside {
    background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
    background-position: top right;
    background-repeat: no-repeat;
}

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
}

#container #header-usernav li {
    float: left;
    padding: 0;
    margin: 0 0.2em;
}

이미지가 다르므로 HTML/CSS를 테스트하기 위해 붙여 넣을 수 있습니다.

거래는 무엇입니까? 내가 뭘 잘못하고 있죠?

도움이 되었습니까?

해결책

오버플로를 추가하는 것이 좋습니다 : 숨겨진; (Zoom : 1; IE6의 크로스 브라우저 호환성을 유지하려면 컨테이너 DIV에 대한 개간 DIV를 추가하지 않고 컨테이너 DIV. Clear는 소스 코드에 Bloat를 추가합니다.

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    overflow: hidden;
    zoom: 1;
    height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}

다른 팁

어린이 만 떠 다니면 외부 용기는 0px의 높이를 반환합니다. 따라서 플로팅 된 요소 (들) 직후에 다음을 배치 할 수 있습니다.

<div class="clear"></div>

다음 규칙을 추가하십시오.

.clear { clear:both; }

예를 들어:

<div id="container">
    <div id="header-usernav" class="span-6 last large">
        <div id="header-usernav-leftside">
          <div id="header-usernav-rightside">
            <ul>
                <li>Register</li>
                <li>Signin</li>
                <li>Signout</li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
    </div>
</div>

DIV의 높이가 없기 때문에 일어나고 있습니다. 빈 DIV를 추가 할 수 있습니다 clear: both UL 직후. 또는 이러한 스타일을 UL에 추가 할 수 있습니다

width: 100%;
overflow: auto;

보다 이것 설명을 위해.

을 추가하다 height: 28px; 너의 ~에게 ul CSS에서. Jonathan과 Chetan은 이미 이것이 왜 효과가 있는지에 대한 매우 좋은 설명을했지만, 떠 다니는 요소의 부모는 떠 다니는 아이들의 높이에 영향을받지 않습니다.

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