브라우저가 최소화 될 때 floated li 요소의 형식이 확장되지 않습니다.

정렬되지 않은 목록을 사용하여 탐색 막대를 만들었습니다. 또한 내 로고와 navbar 링크가 포함 된 래퍼를 만들었습니다. 래퍼의 최소 너비는 960px가 되길 원합니다. 브라우저 창을 완전히 확장하면 잘 보입니다.브라우저가 최소화 될 때 floated li 요소의 형식이 확장되지 않습니다.

완전히 확장 창

내가 래퍼보다 좁은로 창을 최소화하고, 네비게이션 바의 끝을 통해 다시 스크롤, 단지 배경 색상 네비게이션 바의 형식 ()가 손실됩니다. 비슷한 것이 헤더에 발생합니다.

여전히 최소 폭에 내 래퍼를 유지하면서 내가 헤더 pawprint 이미지와 UL에 오렌지 배경 색상을 얻을 수있는 방법

이, 창의 오른쪽으로 확장하는 최소화 된 윈도우 960 픽셀?

#nav ID와 서식을 확장했지만 분명히 스크롤바 및 기타 원치 않는 단점을 만든 헤더에 "overflow-x : auto"를 시도했습니다.

나는 내 문제를 모으고 li 요소가 떠 다니는 것과 관련이 있으며 clearfix를 시도했지만 잘못된 것이거나 작동하지 않는다.

HTML과 CSS 만 사용하는 것이 이상적입니다. 그럼에도 불구하고, 나는 flexbox가 해결책이 될지도 모릅니다. 그러나 저는 flexbox에 잠깐 들어가야하는 것을 피하기를 희망했습니다. 그러나해야만한다면, 그렇게 할 것입니다.

내 코드는 다음과 같습니다. 어떤 도움을 주셔서 감사합니다! 당신이 할 수있는

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
#logo { 
 
    width: 160px; 
 
    height: 160px; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
    border-color: black; 
 
    border-style: dotted; 
 
    border-width: 1px; 
 
} 
 

 
#nav { 
 
    list-style-type: none; 
 
    margin: -2.25em 0; 
 
    background-color: rgba(240, 100, 60, 1); 
 
    height: 2em; 
 
    cursor: default; 
 
} 
 

 
#nav li { 
 
    float: right; 
 
    font-size: 1.25em; 
 
    width: 8em; 
 
    text-align: center; 
 
} 
 

 
header { 
 
    background-image: url('../images/Asset%202.png'); 
 
    background-repeat: repeat-x; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="styles/stack-overflow-style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div class="wrapper"> 
 
     <img id="logo" src="https://i.pinimg.com/originals/4e/de/bc/4edebc3259e32539dd6d6d29d5d8474a.jpg" alt="Good Boy Dog Care Logo"> 
 
    </div> 
 
    <ul id="nav"> 
 
     <div class="wrapper"> 
 
     <li>Contact</li> 
 
     <li>Services</li> 
 
     </div> 
 
    </ul> 
 
    </header> 
 
</body> 
 

 
</html>

출처

2017-09-25 cliffgallagher

있는 유일한 방법은 mimimized 브라우저 폭에 대한 사용자 지정 스타일을 설정 코드를 살펴하는 것입니다 :

@media screen and (min-width: 1700px) and (max-width: 1998px) { 
    //your modified styling for the minimized window size goes here 
}

을하면 얻을 수있다 다음과 같은 자바 스크립트 함수를 사용하여 최소화 된 창의 너비 :

alert($(window).width());

출처

2017-09-26 06:05:34

브라우저가 최소화 될 때 floated li 요소의 형식이 확장되지 않습니다.

답변

관련 문제