플로트 블록 레벨 요소 : 예가 어떻게되는 경우 너비를 설정해야합니까?

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

  •  03-07-2019
  •  | 
  •  

문제

텍스트 상자, 드롭 다운 목록 및 제출 버튼이 있다고 가정 해 봅시다. 그것들은 모두 인라인 요소입니다. 이는 "공식적으로"마진, 패딩, 너비 및 높이 특성을 무시해야한다는 것을 의미합니다 (실제로는 아님). 높이를 버튼으로 설정하기 위해 올바른 방법으로 이동하려면 디스플레이와 같은 것을 작성한 다음 높이를 정의합니다. 그러나 블록 레벨 요소가 예기치 않게 확장 될 것이라는 고려 사항이 있으므로 너비를 약간의 고정 값으로 설정하는 것이 좋습니다. 문제는 버튼의 텍스트에 동적으로 정의 될 수 있기 때문에 너비를 모른다는 것입니다.

또 다른 시나리오 : <ul> 그리고 <li>. 일부 항목이 왼쪽으로 그룹화되고 몇 개가 오른쪽으로 뻗어있는 상태에서 수평으로 정렬하고 싶습니다. 둘 다 <ul> 그리고 <li> 블록 레벨 요소입니다. 메뉴가 사용 가능한 모든 수평 공간을 가져 가서 항목 높이를 가지고 재생하고 메뉴 항목을 양쪽으로 밀기 위해 블록 모드는 괜찮습니다. 나는 그냥 float : left and float : 작업을 달성하기 위해 오른쪽으로 사용하겠습니다. 그러나 다시 사용하는 것은 블록 요소이기 때문에 메뉴 요소에 너비를 설정해야합니다. 항목의 텍스트가 다를 수 있기 때문에 폭을 모릅니다. 그러나 모든 것이 그대로 잘 렌더링되는 것 같습니다.

플로팅 또는 너비 세트없이 또는 목록 항목 예제없이 블록 요소로 렌더링 해야하는 인라인 요소 모두에 어떤 문제가 있는지 알지 못했습니다. 현재 버전이 무엇이든 IE7, FF3, Opera 9 및 Safari에서 잘 작동합니다. 문제는 여전히 남아 있습니다.이 인라인 투 블록 요소 또는 실제 블록 요소가 떠 다니지 만 너비 세트가 없거나 모든 것을 그대로 두는 것에 대해 걱정해야합니까? 내가 뭔가를 놓치고 있습니까, 아니면 단순히 당신이 옳지 않다고 기대해서는 안되는 것들 중 하나입니까?

도움이 되었습니까?

해결책

텍스트 상자, 드롭 다운 목록 및 제출 버튼이 있다고 가정 해 봅시다. 그것들은 모두 인라인 요소입니다. 이는 "공식적으로"마진, 패딩, 너비 및 높이 특성을 무시해야한다는 것을 의미합니다 (실제로는 아님). 높이를 버튼으로 설정하기 위해 올바른 방법으로 이동하려면 디스플레이와 같은 것을 작성한 다음 높이를 정의합니다. 그러나 블록 레벨 요소가 예기치 않게 확장 될 것이라는 고려 사항이 있으므로 너비를 약간의 고정 값으로 설정하는 것이 좋습니다. 문제는 버튼의 텍스트에 동적으로 정의 될 수 있기 때문에 너비를 모른다는 것입니다.

당신이 언급하지 않는 한 인터넷 익스플로러의 박스 모델은 단점입니다, 당신은 예기치 않게 확장하거나 계약하는 것에 대해 걱정해서는 안됩니다. 당신이 돌보는 한 브라우저 변형에 대한 정규화, 당신은 괜찮을 것입니다. 영광을 디자인하는 길을 따라 예상치 못한 원치 않는 부작용이 있다면, 당신은 당신이 주장하는 프로그래머 오류이기 때문에 그것을 디버깅합니다. CSS는 기발 할 수 있지만 대부분의 주요 브라우저에서 시간의 95%가 적절한 변명은 아닙니다. 우리가 이야기하지 않는 다른 5%.

이것이 내가 당신의 문제를 이해하는 방법입니다.

당신은 떠 다니는 메뉴를 원합니다 <li> 뷰포트의 너비 (사용자가 브라우저 창에서 보는 것)에 걸쳐 수평 메뉴가 있으면 뷰포트의 전체 너비가되도록합니다.

고정 너비 설계 측면에서 생각하는 것처럼 들립니다. 실제로 목적에 맞는 것처럼 들리는 것은 유체 폭 디자인입니다. 즉, '탄성'인 디자인을 생성하고 사용자의 브라우저 창의 크기에 비해 확장 및 계약을 제공합니다. 각 요소에 픽셀 너비를 설정하는 것을 예상하는 디자인을 만든 경우 유체 폭 헤더 및 내비게이션을 유지하는 우아한 방법을 찾을 수 있지만 고정형 기본 콘텐츠 영역이있을 수 있습니다. 완전 재 설계없이 행복한 매체를 찾을 수 있습니다. 이 연습은 당신이 찾고있는 것일 것입니다. 좋은 고정 된 범위 및 유체 폭 용어의 설명 전문 용어에 익숙하지 않고 이러한 아이디어를 자세히 살펴 보려면 여기에서 찾을 수 있습니다.

도로를위한 하나 더 :

모든 부동 요소에 너비를 설정합니다 권장 될뿐만 아니라 W3C에 따라 CSS2 표준의 일부입니다.

  • 안젤리나

다른 팁

당신은 자신에게 약간의 스트레스를 받고 있습니다. :)

체크 아웃 이것들 연결, 특히 9.4, 9.5 및 10.3. 및 Ctrl-F "Inline-Block"

우리가 당신이 언급 한 "공식"라인을 취하면 너비, 높이 및 이러한 요소에 대해 걱정할 필요가 없으므로 인생은 쉽습니다.

Pixel은 완벽하다고 생각하지 말고 프레젠테이션의 미세한 걱정하지 말고 표준을 따르고 브라우저 및 사용자가 스타일을 정의하도록 허용합니다 ...

(만약 그것이 "비공식적"실제에서 그렇게 간단한 것이라면))

좋아, 내 질문이 올바르게 이해되지 않았다고 생각합니다. 떠 다니는 상자의 너비를 설정하지 않으면 어떻게됩니까? 나는 그것을 설정할 수 없다. 나는 그것을 모른다. 내용에 따라 다르기 때문입니다. 모든 상자가 콘텐츠 너비로 축소됩니까? 이것이 실제로 작동하는 방식입니다. 그리고 나는 그것에 만족합니다. 이 행동이 예상되어야한다는 공식 확인이 있습니까?

추가 : 나는 여기서 흥미로운 것을 foudn니다. http://www.webmasterworld.com/css/3811603.htm

차이점에 대한보다 기술적 인 설명에 대한 권장 사항을 확인하는 것이 좋습니다. 그러나 단순히 CSS2 (1998)와 CSS2.1 (2005 년 2 개월, 2007 년) 사이에 부유물의 동작이 바뀌 었습니다. CSS2에 따라 플로트에서 너비를 설정 해야하는 반면 FF3에서 볼 수있는 "수축 포장"은 CSS2.1입니다. 즉, Jul/2007 Pre-2007 브라우저는 Div#컨테이너를 전체 뷰포트 너비로 늘릴 때 제조 시간과 관련된 권장 사항을 준수한다는 것을 의미합니다. (오페라를 설명하지는 않지만 항상 고유 한 일을했습니다.)

그렇다면, 나는 경쟁합니다. 앞서 언급했듯이 현재 IE7, FF3, Opera 9 및 Safari에서 작동합니다.

더 이상 댓글이 있습니까?

(문제를 이해한다고 가정하면)

대부분의 경우 목록 항목에서 너비를 설정할 필요가 없습니다. 그러나 (예, 여기에 있지만 여기에 있습니다) 디스플레이와 링크가 있다면 다음과 같은 링크가 있다면 (슬라이딩 도어를 사용하고 싶다고 가정하자) 약간의 트릭을 수행해야합니다.

HTML :

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

및 CSS :

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

당신이 이것을 좋아하지 않으면, 링크는 모든 부모에게 늘어납니다. 목록 요소가 아닌 링크;)이 방법을 수행하면 IE6에 "최소 폭"을 설정하면 다른 문제가 없습니다.

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