ฉันจะกำหนดช่องว่างแนวตั้งระหว่างรายการได้อย่างไร


115

ภายใน<ul>องค์ประกอบสามารถจัดรูปแบบระยะห่างแนวตั้งระหว่างบรรทัดได้อย่างชัดเจนด้วยแอตทริบิวต์ line-height

คำถามของฉันคือภายใน<ul>องค์ประกอบฉันจะกำหนดระยะห่างแนวตั้งระหว่างรายการได้อย่างไร


1
ul li { margin: ???; padding: ???; line-height: ???; }แอตทริบิวต์ CSS ทั้งหมดหรือบางส่วน
Brad Christie

คำตอบ:


112

คุณสามารถใช้ระยะขอบ ดูตัวอย่าง:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

โดยเฉพาะใช้ระยะขอบบนliองค์ประกอบไม่ใช่ulองค์ประกอบ
duanev

41

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

แก้ไข: หากคุณไม่ใช้กรณีพิเศษสำหรับองค์ประกอบ li สุดท้ายรายการของคุณจะมีระยะห่างเล็กน้อยหลังจากนั้นคุณสามารถดูได้ที่นี่: http://jsfiddle.net/wQYw7/

ตอนนี้เปรียบเทียบกับโซลูชันของฉัน: http://jsfiddle.net/wQYw7/1/

แน่ใจว่าใช้ไม่ได้กับเบราว์เซอร์รุ่นเก่า แต่คุณสามารถใช้ส่วนขยาย js ได้อย่างง่ายดายซึ่งจะเปิดใช้งานสิ่งนี้สำหรับเบราว์เซอร์รุ่นเก่า


1
@Layne ส่วนหนึ่งของงานของเราในฐานะนักพัฒนาเว็บ / ผู้เขียนโค้ดคือการจัดหาโซลูชันที่จะทำงานในสภาพแวดล้อมต่างๆให้ได้มากที่สุด คำตอบของคุณเกินจริงสำหรับคำถามที่ถาม
ฆ่าทิ้ง

1
ฉันไม่คิดอย่างนั้น คุณจัดเตรียมโซลูชันสำหรับสภาพแวดล้อมที่คุณต้องการกำหนดเป้าหมายเท่านั้นทุกอย่างจะมากเกินไปเว้นแต่คุณจะวางแผนที่จะขยาย นอกจากนี้คำตอบทั้งหมดยังมีข้อเสียของการเพิ่มช่องว่างก่อนและ / หรือหลังองค์ประกอบรายการแรก / สุดท้าย ซึ่งไม่ใช่คำถามเขาต้องการเว้นระยะห่างระหว่างองค์ประกอบรายการเท่านั้น (อย่างน้อยเขาก็เขียนมัน) องค์ประกอบสุดท้ายในคำตอบอื่น ๆ จะมีระยะห่างหลังจากนั้นแม้ว่าจะไม่มีองค์ประกอบ li ต่อไปนี้

สภาพแวดล้อมที่เขาทำงานด้วยคือเว็บเบราว์เซอร์ นั่นไม่ใช่การแนะนำโซลูชันที่ใช้ได้กับทุกที่ นอกจากนี้หากคุณกังวลเกี่ยวกับระยะขอบของรายการสุดท้ายจริงๆคุณจะไม่แนะนำวิธีแก้ปัญหาที่ต้องใช้ js ในการแก้ไข คุณสามารถใช้:first-childและมันจะทำงานได้กับ IE7 + ทุกอย่าง
ฆ่าใน

4
@disinfor ฉันไม่เห็นด้วยกับการกำหนดเป้าหมายทุกอย่าง ความเครียดส่วนหนึ่งของการพัฒนาเว็บมาจากการรองรับเบราว์เซอร์ที่ไม่รองรับเรา Safari เป็นหนึ่งในนั้น เราจำเป็นต้องลุกขึ้นยืนเบราว์เซอร์ที่ถือกลับอินเทอร์เน็ตmedium.com/@richtr/... หน้าเว็บของเราควรนำการแจ้งเตือน "เราไม่สนับสนุนเบราว์เซอร์ของคุณ" กลับมาเพื่อไม่ให้ใช้งานได้ทุกที่ และเราจำเป็นต้องแจ้งและยืนหยัดต่อลูกค้าด้วย หรือเราไม่สามารถทำอะไรได้เลยและเป็นพรมปูพื้นที่ยอดเยี่ยม
1.21 กิกะวัตต์

@ 1.21gigawatts "หน้าเว็บของเราควรนำกลับมา" เราไม่สนับสนุนเบราว์เซอร์ของคุณ "" mhm, no. ซึ่งเรียกว่าการก่อวินาศกรรมการแข่งขันและผิดกฎหมายในหลายประเทศ Microsoft ทำเช่นนั้นกับ Skype for Web Skype for Web ยังคงทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์อื่น ๆ Google ทำให้ Youtube ทำงานผิดพลาดใน Safari มานานกว่าหนึ่งปี Google บล็อกผู้ใช้ Tor ไม่ให้ใช้บริการบางอย่าง ไม่ใช่ประเด็นของ "เว็บแพลตฟอร์ม" ที่จะทำให้แอปและบริการไม่ขึ้นอยู่กับแพลตฟอร์มเช่นเดียวกับการไม่ปิดกั้นบางแพลตฟอร์ม หากคุณต้องการทำเช่นนั้นทำไมไม่สร้างโปรแกรมเนทีฟแทนล่ะ ในท้ายที่สุดพวกมันก็มีพลังมากขึ้น
Andreas

35

ฉันจะชอบสิ่งนี้ซึ่งมีคุณสมบัติของการรองรับ IE8

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle


27

เพิ่มแท็กmarginของคุณ liซึ่งจะสร้างช่องว่างระหว่างliและคุณสามารถใช้line-heightเพื่อกำหนดระยะห่างให้กับข้อความภายในliแท็ก


3

หลายครั้งเมื่อสร้างอีเมล HTML คุณไม่สามารถใช้สไตล์ชีตหรือบล็อกสไตล์ / สไตล์ได้ CSS ทั้งหมดต้องอยู่ในบรรทัด ในกรณีที่คุณต้องการปรับระยะห่างระหว่างสัญลักษณ์แสดงหัวข้อย่อยฉันใช้ li style = "margin-bottom: 8px;" ในแต่ละรายการสัญลักษณ์แสดงหัวข้อย่อย ปรับแต่งค่าพิกเซลตามที่คุณต้องการ


นอกจากนี้แท็กประเภทสไตล์ / สไตล์ก็เลิกใช้งานแล้ว
Ben Slade


0

การตั้งค่า padding-bottom สำหรับแต่ละรายการโดยใช้ pseudo class เป็นวิธีการที่ใช้ได้ นอกจากนี้ยังสามารถใช้ความสูงของเส้น โปรดจำไว้ว่าคุณสมบัติแบบอักษรเช่นตระกูลแบบอักษรน้ำหนักแบบอักษร ฯลฯ มีบทบาทสำหรับความสูงที่ไม่เท่ากัน


2
คุณสามารถให้ตัวอย่างการแก้ปัญหาของคุณได้หรือไม่?
Muldec

-9

<br>ระหว่าง<li></li>รายการบรรทัดดูเหมือนว่าจะทำงานได้ดีอย่างสมบูรณ์ในเว็บเบราว์เซอร์ทั้งหมดที่ฉันได้ลองใช้ แต่ไม่สามารถผ่านตัวตรวจสอบ W3C CSS3 ออนไลน์ได้ มันทำให้ฉันมีระยะห่างระหว่างบรรทัดที่ฉันตามหลังอย่างแม่นยำ เท่าที่ฉันกังวลเนื่องจากมันใช้งานได้อย่างไม่ต้องสงสัยฉันก็ยังคงใช้มันต่อไปไม่ว่า W3C จะพูดอะไรจนกว่าจะมีใครบางคนสามารถหาทางเลือกทางกฎหมายที่ดีได้


คำแนะนำของคุณใช้ได้ดีหากคุณพอใจกับความสูงของบรรทัดปัจจุบัน แต่ฉันคิดว่าเขาต้องการระบุจำนวนพื้นที่ของเขาเอง การใช้ตัวแบ่งบรรทัดเพียงแค่สร้างบรรทัดใหม่โดยใช้ความสูงของบรรทัดปัจจุบัน
1.21 กิกะวัตต์

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