วิธีการสร้าง Div ที่ไม่มีเนื้อหามีความกว้าง?

110

ฉันกำลังพยายามเพิ่มความกว้างให้กับ a 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>
html  css  width  css-float 
— ทุกวัน
แหล่งที่มา

คำตอบ:

158

โดยปกติ div จะต้องมีช่องว่างอย่างน้อย (& nbsp;) เพื่อให้มีความกว้าง

— jcomeau_ictx
แหล่งที่มา
28
ใช้ "display: inline-block"
— Luccas
ทางออกที่ดีถ้าฉันใช้ "" แทน & nbsp; มันไม่ได้ผล แต่ทำไม?
— Amitābha
1
'& nbsp;' เป็นเทคนิคที่ดีเมื่อเทียบกับความสูงต่ำสุดเพราะไม่บังคับความสูง สมมติว่าขนาดแบบอักษรของคุณตั้งไว้ที่ 16px และช่องว่างภายในของคุณคือ 15px div ของคุณจะคงความสูงเท่าเดิมก่อนและหลังข้อความถูกเพิ่มลงใน div (สมมติว่าทั้งหมดอยู่ในบรรทัดเดียว)
— eroedig
สำหรับฉันการเว้นวรรคไม่ได้ผล! div ที่มีความกว้าง 100px และภายใน & nbsp; ดูเหมือนจะไม่เป็น 100px ใน div ที่มีองค์ประกอบอินไลน์แบบยืดหยุ่น
— Micky
89

ใช้อย่างใดอย่างหนึ่งpadding, heightหรือ&nbsp ความกว้างจะมีผลกับความว่างเปล่าdiv

แก้ไข:

ไม่ใช่ศูนย์min-heightยังใช้งานได้ดี

— ArK
แหล่งที่มา
5
ฉันชอบวิธีแก้ปัญหาช่องว่างภายในช่องว่างภายในใด ๆ ที่มากกว่า 0 จะได้ผล ด้วยวิธีนี้คุณจะไม่มีตัวเลือกแปลก ๆ&nbsp;ในไฟล์div.
— Brian Duncan
1
โปรดทราบ: สำหรับโซลูชันช่องว่างภายในคุณจำเป็นต้องจัดเตรียมช่องว่างทั้งด้านซ้าย / ขวาและด้านบน / ด้านล่างเพื่อให้ใช้งานได้
— Govind Rai
62

ใช้min-height: 1px; ทุกอย่างมีความสูงขั้นต่ำ 1px เป็นอย่างน้อยดังนั้นจึงไม่มีการใช้ช่องว่างเพิ่มขึ้นด้วย nbsp หรือช่องว่างภายในหรือถูกบังคับให้ทราบความสูงก่อน

— ไรลีย์
แหล่งที่มา
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 spec บ้าง?
— Jaime Hablutzel
สิ่งนี้ได้ผลดีที่สุดสำหรับฉัน ฉันลองทำตามคำแนะนำอื่น ๆ เกือบทั้งหมดที่นี่ยกเว้น & nbsp;
— ayahuasca
28

ใช้ CSS เพื่อเพิ่มพื้นที่ว่างให้กับ div ของคุณ เนื้อหาของ div จะไม่มีที่ว่าง แต่จะบังคับให้ div แสดง

.test1::before{
   content: "\200B";
}
— เบอร์นาร์ดวี
แหล่งที่มา
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;}
  • หรือใส่ไว้&nbsp;ใน DIV (บางครั้งอาจทำให้เกิดผลกระทบที่ไม่คาดคิดเช่นใช้ร่วมกับtext-decoration: underline;)
— Simhumileco
แหล่งที่มา
1

สายเกินไปที่จะตอบ แต่อย่างไรก็ตาม

ในขณะที่ใช้ CSS ในการจัดรูปแบบ div (content-less) คุณสมบัติ min-height ต้องตั้งค่าเป็น "n" px เพื่อให้ div มองเห็นได้ (ใช้ได้กับ webkits และ chrome ในขณะที่ไม่แน่ใจว่าเคล็ดลับนี้จะใช้ได้กับ IE6 และ ต่ำกว่า)

รหัส:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
<div class="shape-round"></div>
ขยายข้อมูลโค้ด

— ภัสกรเปรมานิก
แหล่งที่มา
0

ฉันมีปัญหาเดียวกัน ฉันต้องการให้ไอคอนปรากฏโดยการกดปุ่ม แต่ไม่มีการเคลื่อนไหวใด ๆ และเลื่อนสภาพแวดล้อมเช่นเดียวกับหลอดไฟ: เปิดและปิดปรากฏขึ้นและหายไปดังนั้นฉันจึงต้องสร้าง div ว่างที่มีขนาดคงที่ 

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

ทำเคล็ดลับให้ฉัน

— ตาย
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.