콘텐츠가없는 div에 너비를 지정하는 방법은 무엇입니까?

110

에 너비를 추가하려고하는데 div내용이 없기 때문에 문제가 발생한 것 같습니다.

지금까지 내가 가지고있는 CSS와 HTML이 있지만 작동하지 않습니다.

CSS

body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}

HTML

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

— 매일 실행
소스

158

div는 일반적으로 너비를 갖기 위해 적어도 끊기지 않는 공백 (& nbsp;)이 필요합니다.

— jcomeau_ictx
소스

28

"display : inline-block"사용

— Luccas

""대신 & nbsp; 작동하지 않지만 왜?

— Amitābha 2013-08-28

1

'& nbsp;' 높이를 강요하지 않기 때문에 min-height와 반대되는 좋은 기술입니다. 글꼴 크기가 16px로 설정되고 패딩이 15px로 설정되어 있다고 가정합니다. div는 텍스트가 div에 추가되기 전후에 동일한 높이를 유지합니다 (모두 한 줄에 있다고 가정)

— eroedig

나에게 공간을 두는 것이 작동하지 않습니다! 너비가 100px이고 & nbsp; 플렉스 인라인 요소와 사업부에서 100 픽셀로처럼 보이지 않는

— 미키

89

하나를 사용 padding, height또는 &nbsp 폭이 비어로 적용하기div

편집하다:

0이 아닌 min-height것도 잘 작동합니다.

— 방주
소스

5

패딩 솔루션을 선호하며 0보다 큰 패딩이 작동합니다. 그렇게  하면 div.

— Brian Duncan

1

참고 : 패딩 솔루션의 경우 작동하려면 왼쪽 / 오른쪽 및 위쪽 / 아래쪽 패딩을 모두 제공해야합니다 .

— Govind Rai

62

Use min-height: 1px; Everything은 최소 높이가 1px 이상이므로 nbsp 또는 padding으로 추가 공간을 차지하지 않거나 높이를 먼저 알아야합니다.

— Riley
소스

2

귀하의 솔루션은 나에게 가장 깨끗한 것처럼 보이지만 CSS 사양에서 그 이유를 찾으려고 노력해 왔으며 어디서도 찾을 수 없습니다. 가장 가까운 CSS 2.1, 9.5 Floats곳은라고 말한 곳 Note: this means that floats with zero outer height or negative outer height do not shorten line boxes.이지만 라인 상자 즉 라인에 대해 이야기합니다. 단락에 있지만 인접한 상자에 대해서는 아닙니다. CSS 사양에 더 익숙한 사람이 있습니까?

— Jaime Hablutzel 2014

이것은 나를 위해 가장 잘 작동했습니다. & nbsp;를 제외하고 여기에서 대부분의 다른 제안을 시도했습니다.

— 아야와 스카

28

CSS를 사용하여 div에 너비가 0 인 공간을 추가합니다. div의 내용은 공간을 차지하지 않지만 div가 표시되도록 강제합니다.

.test1::before{
   content: "\200B";
}

— BernardV
소스

9

너비는 있지만 내용이나 높이는 없습니다. test1 클래스에 높이 속성을 추가하십시오.

— 남자 이름
소스

7

빈 DIV를 표시 float: left하거나 float: right표시 하는 방법에는 여러 가지가 있습니다.

다음은 내가 아는 것입니다.

세트 width(나 min-width)와 height(나 min-height)
또는 설정 padding-top
또는 설정 padding-bottom
또는 설정 border-top
또는 설정 border-bottom
또는 사용 의사 요소 : ::before이나 ::after와 :
- {content: "\200B";}
- 또는 {content: "."; visibility: hidden;}
또는  DIV 안에 넣습니다 (때로는 예상치 못한 효과를 가져올 수 있습니다. 예를 들어 text-decoration: underline;)

— Simhumileco
소스

1

display:block;당신의 test1 에 추가 하십시오

— DevenX
소스

1

대답하기에는 너무 늦었지만 그럼에도 불구하고.

CSS를 사용하는 동안 div (내용없는) 스타일을 지정하려면 min-height 속성을 "n"px로 설정하여 div를 표시해야합니다 (웹킷 및 크롬에서 작동하지만이 트릭이 IE6 및 보다 낮은)

암호:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

스 니펫 확장

— 바 스카 프라 마닉
소스

0

 트릭을 할 수 있습니다. XSL 문서에서 작동

— 다니엘 포레스트
소스

0

나는 같은 문제가 있었다. 버튼을 누르면 아이콘이 표시 되길 원했지만 아무런 움직임도없이 환경을 슬라이드하면 마치 전구처럼 켜졌다 꺼졌다가 나타나고 사라져서 크기가 고정 된 빈 div를 만들어야했습니다.

width: 13px;
min-width: 13px;

나를 위해 트릭을 했어

— 죽음의
소스

-1

이 DIV의 CSS에 추가하면 position: relative모든 작업을 수행합니다.

— Krzysztof AN
소스