ฉันจะหยุดลอยซ้ายได้อย่างไร?


101

ฉันมีรหัสต่อไปนี้:

<div style="float: left; width: 100%;">
  <label style="float: left;">ABC</label>  
  <input style="float: left; font-size: 0.5em;" type="button"   onclick="addTiny(0,'Question_Text'); return false;" value="&#x25BC;" title="Editor" />   
  <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="&#x25B2;" title="Hide" />   

  <div class="adm">
    <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
      abc
    </textarea>
  </div>
</div>

ปัญหาของฉันคือ div ที่มี class adm ลอยไปทางซ้ายและอยู่ในบรรทัดเดียวกับป้ายกำกับและปุ่มป้อนข้อมูลสองปุ่ม มีวิธีที่ฉันจะทำให้การเปลี่ยนแปลงนี้ห่างจากการลอยตัวได้หรือไม่?


คุณควรยอมรับคำตอบแม้ว่าจะเป็นของคุณเองก็ตาม
DᴀʀᴛʜVᴀᴅᴇʀ

คำตอบ:


104

แนวทางมาตรฐานคือการเพิ่ม div การหักบัญชีระหว่างองค์ประกอบระดับบล็อกลอยทั้งสอง:

<div style="clear:both;"></div>

3
แต่ในบางกรณีคุณต้องเพิ่มdisplay:block
Volodymyr Levytskyi

65

บางครั้งล้างจะไม่ทำงาน ใช้float: noneเป็นการลบล้าง


3
ใช่ถ้าคุณต้องการแทนที่รายการ CSS ที่มีอยู่float: left(หรือขวา) นี่คือวิธีแก้ปัญหา
Alexis Wilke

28

คุณสามารถแก้ไข.admและเพิ่ม

.adm{
 clear:both;
}

นั่นน่าจะทำให้ย้ายไปขึ้นบรรทัดใหม่


นั่นควรจะเป็น.admฉันคิดว่า
tjm


4

โอเคฉันเพิ่งรู้คำตอบคือการลบลูกลอยแรกที่เหลือจาก DIV ตัวแรก ไม่รู้ทำไมเมื่อก่อนไม่เห็นแบบนั้น


3

คุณควรตรวจสอบคุณสมบัติ "clear" ใน css ในกรณีที่การลบ float ไม่ใช่ตัวเลือก




0

ด้วยเหตุผลบางประการการแก้ไขข้างต้นไม่ได้ผลสำหรับฉัน (ฉันมีปัญหาเดียวกัน) แต่สิ่งนี้ทำ:

ลองวางทั้งหมดขององค์ประกอบที่ลอยในส่วน div <div class="row">...</div>นี้:

จากนั้นเพิ่ม CCS นี้: .row::after {content: ""; clear: both; display: table;}


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