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

115

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

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

html css html-lists

— Brice Coustillas
แหล่งที่มา

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

— Paulie_D
แหล่งที่มา

27

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

— DISINFOR
แหล่งที่มา

3

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

— มัลคอล์มสโตน
แหล่งที่มา

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

— Ben Slade

2

หากต้องการใช้กับรายการทั้งหมดให้ใช้

ul.space_list li { margin-bottom: 1em; }

จากนั้นใน html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

— ทอมบาร์เทนสไตน์
แหล่งที่มา

0

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

— ฤๅษีจัง
แหล่งที่มา

2

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

— Muldec

-9

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

— Melvyn Owen
แหล่งที่มา

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

— 1.21 กิกะวัตต์

หากคุณทำซ้ำในรายการที่มีหลายรายการการเพิ่ม br เป็นวิธีปฏิบัติที่แย่มาก มาร์กอัปเป็นวิธีที่ปลอดภัยที่สุดและรวดเร็วที่สุดในการเพิ่มพื้นที่เนื่องจากคำตอบข้างต้นได้แนะนำไว้

— SeaWarrior404