CSS 배경 이미지의 동적 너비

목록 및 CSS를 사용하여 메뉴 요소를 표시하는 내 페이지에 설정 메뉴 막대가 있습니다. 메뉴 버튼의 오른쪽에,이 경우에는 "Home", 나는 메뉴 바 너비의 끝 요소를 닫기 전에 페이지 너비까지 확장하고 싶은 빈 바 요소가 있습니다. 폭을 100 %로 설정하여 다음 줄로 나뉘고 아래 표시된 것처럼 페이지의 전체 폭을 채우도록했습니다. 어떻게 모든 줄을 동일한 줄에 유지하고 빈 요소가 너비가 동적인지에 대한 생각?CSS 배경 이미지의 동적 너비

html로 :

<div> 
    <li class="menu-home"> 
     <a href="#">&nbsp;</a> 
    </li> 
    <li class="menu-bar"> </li> 
    <li class="menu-bar-right"> </li> 
</div>

CSS의 :

li.menu-bar { 
    position: static; 
    float: left; 
    list-style-type: none; 
    background-image: url('top.png'); 
    border-style: none; 
    border-width: 0px; 
    padding: 0px; 
    height: 34px; 
    width: 100%; 
}

문제 :

enter image description here

출처

2012-07-28 Peter Larsen

당신은 각각 left and right에 'home' and 'right'의 LI를 float 수 있습니다. 마크 업에서 home and rightLIs 아래에 나타나는 LIs은 가운데 영역으로 스며들 수 있습니다.

http://jsfiddle.net/gwmFk/1/

출처

2012-07-28 17:56:49

의견을 보내 주셔서 감사합니다. 나는 당신의 디자인을 구현했고 모든 것은 이제 한 줄에 표시되지만, 내가 가지고있는 중심 요소는 왼쪽 및 오른쪽 요소 뒤에 이어져 둥근 모서리가 사라집니다. 가운데 요소가 페이지의 전체 너비가 아닌 여백을 채우는 방법은 무엇입니까? –

"오버플로 : 숨김;"을 구현하지 않았습니다. 바르게. 일단 내가 중심 요소에 솔루션을 추가했습니다 - 고마워요 –

당신이 당신의 홈 버튼의 폭을 알고 있다면 당신은 줄의 나머지 부분에 display: inline-block;를 사용하고 그것을 그 폭과 동일한 마우스 오른쪽 마진 (플러스 패딩이나 공간 등)을 줄 수

버튼의 너비를 알고 있습니까?

출처

2012-07-28 19:22:06

당신의 제안을 가져 주셔서 감사합니다. 단추의 너비가 있지만 경우에 따라 더 많은 단추가 추가됩니다. 50 개 이상의 이미지를 표시하는 경우 이미지가 페이지로 나뉘어 다음 페이지로 돌아가며 뒤로 버튼이 추가되어 동적 인 너비를 찾고 있으므로 공간을 채울 수 있습니다 –

그럴 경우 당신은 Twitter Bootstrap (http://twitter.github.com/bootstrap/scaffolding.html)을 보았습니다. 그것은 정확히 당신이 찾고있는 것입니다. 스캐 폴딩 페이지를보고 유체 레이아웃에 중점을 둡니다. 부트 스트랩에는 추가 할 수있는 훌륭한 jQuery 플러그인 세트가 있습니다. 다른 기능을 살펴보아야 만 구현하려는 것이 있는지 확인할 수 있습니다. –

CSS 배경 이미지의 동적 너비

답변

관련 문제