html ตัวไหนลากเส้นแนวนอน จะสร้างบล็อกในบรรทัดโดยใช้ css ได้อย่างไร? เส้นแนวนอนและแนวตั้งโดยใช้ CSS

จากผู้เขียน:ฉันทักทายคุณ ความจำเป็นในการนำเสนอหลายบล็อกบนหน้าเว็บในหนึ่งบรรทัดเป็นงานทั่วไปที่นักออกแบบเลย์เอาต์ต้องเผชิญ มันเกิดขึ้นระหว่างเลย์เอาต์ของเกือบทุกเทมเพลต ดังนั้นไม่ว่าในกรณีใดเราทุกคนจำเป็นต้องรู้และใช้วิธีการพื้นฐานในการเปลี่ยนพฤติกรรมของบล็อก

ก่อนที่เราจะดูเทคนิคทั่วไป ฉันอยากจะจำทฤษฎีเล็กๆ น้อยๆ ก่อน องค์ประกอบหน้าเว็บแบ่งออกเป็นองค์ประกอบแบบบล็อกและแบบอินไลน์ และความแตกต่างระหว่างพวกมันนั้นง่ายมาก - ตัวพิมพ์เล็กสามารถวางในบรรทัดเดียวได้ แต่ตัวบล็อกไม่สามารถทำได้ แน่นอนว่าความแตกต่างไม่ได้จบเพียงแค่นั้น แต่นี่คือความแตกต่างที่สำคัญ บล็อกสามารถมีช่องว่างภายในที่ด้านบนและด้านล่างได้แล้ว (ตัวพิมพ์เล็กไม่มี) และสามารถใช้คุณสมบัติเพิ่มเติมกับบล็อกเหล่านั้นได้

วิธีพื้นฐานในการจัดเรียงบล็อกใน CSS

เราจะไม่ทำให้ซับซ้อนอะไร มี 3 วิธีหลัก:

แปลงบล็อกเป็นองค์ประกอบแบบอินไลน์ ในกรณีนี้ คุณสมบัติบล็อกจะหายไป ดังนั้นตัวเลือกนี้จึงแทบไม่เคยใช้เลย

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

ทำให้องค์ประกอบลอยโดยใช้คุณสมบัติลอย

มุ่งเน้นไปที่ตัวเลือกเหล่านี้ เราจะไม่พิจารณา Flexbox การแสดงตาราง และด้านอื่นๆ สมมติว่าเรามี 3 หัวข้อย่อย

หัวเรื่อง 1

หัวเรื่อง 2

หัวเรื่อง 3

โดยปกติแล้ว คุณสมบัติ CSS ทั้งหมดจะต้องเขียนลงไป แยกไฟล์(style.css) ซึ่งจำเป็นต้องเชื่อมต่อกับเอกสาร html ในไฟล์นี้ ฉันจะเขียนสไตล์มินิมอลเพื่อให้มองเห็นหัวข้อย่อยของเราได้ง่าย

h3( พื้นหลัง: #EEDDCD; )

พวกเขาอยู่ที่นี่บนหน้า:

พวกเขาทำตัวเหมือนบล็อก แต่ละอันตั้งอยู่บนเส้นของตัวเองและมีการเยื้องระหว่างกัน หากต้องการ คุณสามารถตั้งค่าช่องว่างภายในและทำทุกอย่างที่คุณต้องการได้

มาแปลงเป็นบรรทัดแล้วเพิ่มการเยื้องทันที เมื่อต้องการทำเช่นนี้ ตัวเลือก h3 จำเป็นต้องเพิ่มคุณสมบัติต่อไปนี้:

จอแสดงผล: อินไลน์; ช่องว่างภายใน: 30px;

มีปัญหาหลัก 2 ประการที่เกิดขึ้นเมื่อใช้เทคนิคนี้ อย่างแรกคือการเยื้องขั้นต่ำ มันถูกสร้างขึ้นเนื่องจากความจริงที่ว่าในโค้ดมีช่องว่างหนึ่งช่องระหว่างบล็อกซึ่งก่อให้เกิดการเยื้องนี้ หากปัญหานี้จำเป็นต้องแก้ไข มี 2 ตัวเลือกหลัก:

ใน html ให้วางโค้ดของบล็อกที่ต้องการในหนึ่งบรรทัดโดยไม่มีช่องว่าง

ป้อนค่าลบ ระยะขอบขวา -4 พิกเซล นั่นคือจำนวนหนึ่งพื้นที่ที่ใช้

ปัญหาที่สองคือหากองค์ประกอบมีความสูงต่างกัน ปัญหาในการแสดงผลก็อาจเกิดขึ้นได้ โดยรวมแล้ว ตัวเลือกที่ดีที่สุด- บล็อกลอย แทนที่จะแสดง: inline-block เราเขียนสิ่งนี้:

บล็อกในบรรทัดโดยใช้กรอบงาน

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

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

ตัวอย่างเช่น เมื่อคุณควรมี 4 คอลัมน์บนหน้าจอขนาดใหญ่ 3 คอลัมน์บนหน้าจอขนาดกลาง และ โทรศัพท์มือถือ— 2. ด้วยความช่วยเหลือของเฟรมเวิร์ก เช่น Bootstrap หรือด้วยความช่วยเหลือของกริด การนำสิ่งนี้ไปใช้งานก็ใช้เวลาเพียงไม่กี่นาที

การแปลหัวข้อเป็นกรอบงาน Bootstrap ได้อย่างราบรื่นฉันจะทราบอีกครั้งว่าหากคุณต้องเผชิญกับงานในการวางเทมเพลตที่ปรับเปลี่ยนได้ที่ซับซ้อน การไม่ใช้กริดถือเป็นบาป คุณไม่จำเป็นต้องเชื่อมต่อเพื่อทำสิ่งนี้ด้วยซ้ำ เวอร์ชันเต็มกรอบงาน - คุณสามารถปรับแต่งและหยุดเฉพาะสิ่งที่คุณต้องการจริงๆ เท่านั้น

คุณสามารถเรียนรู้วิธีทำงานกับ Framework โดยใช้ . มีการอธิบายทฤษฎีไว้ที่นั่น แต่ที่สำคัญที่สุดคือมีการฝึกฝน คุณกำลังแต่งหน้า 3 เทมเพลตที่ปรับเปลี่ยนได้และได้รับประสบการณ์ดีๆที่จะทำให้คุณสามารถออกแบบเว็บไซต์ตามสั่งหรือเพื่อตัวคุณเองได้ และหากคุณต้องการทำความคุ้นเคยกับข้อดีและความสามารถของเฟรมเวิร์กได้ฟรี ฉันขอแนะนำให้คุณอ่านบทความชุดของเราเกี่ยวกับ Bootstrap รวมถึงการออกแบบเลย์เอาต์ที่เรียบง่าย ฉันขอให้คุณประสบความสำเร็จในด้านการจัดวางและการสร้างเว็บไซต์โดยทั่วไป

ทักทายผู้อ่านทุกท่าน ในบางครั้งช่างฝีมือต้องเผชิญกับปัญหาในการสร้างเส้นแนวนอนหรือแนวตั้งโดยใช้ HTML หรือ CSS นี่คือสิ่งที่ฉันจะบอกคุณในวันนี้

เส้นใน CSS

มีหลายวิธีในการสร้างเส้น หนึ่งในวิธีเหล่านี้ก็คือ ใช้ CSS- หรือค่อนข้างใช้ Border ลองดูตัวอย่าง

และนี่คือสิ่งที่จะเกิดขึ้นตามมา

เส้นแนวนอนและแนวตั้งด้วย ใช้ css.

สามารถวาดเส้นใน CSS ได้โดยใช้ตัวดำเนินการ Border หากคุณต้องการสี่เหลี่ยมผืนผ้าที่มีความกว้างของเฟรมคงที่ คุณสามารถใช้โอเปอเรเตอร์นี้และกำหนดค่าให้กับมันได้ ตัวอย่างเช่น เส้นขอบ:5px solid #000000; จะหมายความว่าเส้นขอบของบล็อกมีความกว้างเท่ากับ 5 พิกเซลเป็นสีดำ

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

• border-top – ตั้งค่าของเส้นขอบด้านบน
• border-bottom – ตั้งค่าของเส้นขอบด้านล่าง
• border-left – ตั้งค่าของเส้นขอบด้านซ้าย
• border-right - ตั้งค่าของเส้นขอบด้านขวา

เส้นแนวตั้งและแนวนอนในรูปแบบ HTML

คุณสามารถสร้างบรรทัดใน HTML ได้ เมื่อต้องการทำเช่นนี้ คุณสามารถใช้แท็ก hr

ในกรณีนี้ เส้นแนวนอนจะถูกวาดขึ้น โดยสูง 1 พิกเซลและเต็มความกว้าง

แต่แท็กนี้สามารถกำหนดค่าบางอย่างได้เช่นกัน

• ความกว้าง– ตั้งค่าความกว้างของเส้น
• สี– กำหนดสีของเส้น
• จัดตำแหน่ง– กำหนดการจัดตำแหน่งไปทางซ้าย, กลาง, ขวา
• ขนาด– ตั้งค่าความหนาของเส้นเป็นพิกเซล

การใช้แท็ก hr ช่วยให้คุณสามารถกำหนดเส้นแนวตั้งได้ แต่ในกรณีนี้คุณจะต้องหันไปใช้สไตล์อีกครั้ง

ในกรณีนี้ เส้นแนวตั้งจะถูกวาดให้สูง 100 พิกเซล หนา 1 พิกเซล และเยื้อง 5 พิกเซล

บทสรุป.

ตอนนี้คุณรู้แล้วว่าคุณสามารถตั้งค่าเส้นแนวตั้งและแนวนอนได้อย่างไร เส้นสามารถตั้งค่าได้เช่นเดียวกับไซต์ปกติด้วย โดยใช้ HTMLและตั้งค่าไว้บนไซต์ที่ใช้ CMS เช่น WordPress แต่ในกรณีนี้คุณจะต้องเปลี่ยนไปใช้โหมด HTML

หากคุณมีคำถามเพิ่มเติม ถามพวกเขาในความคิดเห็น

สวัสดีทุกคน! วันนี้ผมจะมาบอกวิธีสร้างเส้นแนวนอนโดยใช้ html

ในความเป็นจริง ความจำเป็นในการสร้างเส้นแนวนอนเกิดขึ้นค่อนข้างบ่อย เช่น เมื่อคุณต้องการแยกส่วนหนึ่งของข้อความออกจากอีกส่วนหนึ่ง

เส้นแนวนอนและแนวตั้งโดยใช้ CSS

ซึ่งสามารถทำได้โดยใช้ css ในการทำเช่นนี้ ฉันใส่ส่วนที่ต้องการของข้อความลงในบล็อกโดยใช้แท็ก div จากนั้นในไฟล์ style.css หรือในโค้ด html โดยตรงที่เราเขียนคุณสมบัติของบล็อกนี้สำหรับเส้นขอบด้านบนหรือด้านล่างโดยใช้ border-top และ ขอบล่าง นี่คือตัวอย่าง:

ในกรณีนี้ ฉันตั้งค่าสไตล์โดยใช้ css โดยตรงจากโค้ด html และทำให้เส้นขอบด้านบนทึบและด้านล่าง เส้นประ.

นี่คือลักษณะที่ปรากฏบนหน้า:

เส้นแนวนอนโดยใช้ CSS

วิธีนี้มีข้อดี:

• การตั้งค่าที่หลากหลายที่ให้คุณตั้งค่าเส้นได้เกือบทุกประเภท
• คุณสามารถสร้างได้ทั้งแนวนอนและ เส้นแนวตั้ง- หากต้องการสร้างเส้นแนวตั้ง คุณต้องเปลี่ยนขอบบนเป็นขอบซ้าย และเปลี่ยนขอบล่างเป็นขอบขวา

ข้อเสียรวมถึงความยุ่งยากของโค้ด

อย่างไรก็ตาม เมื่อปรากฏออกมา คุณสามารถแทรกเส้นแนวนอนลงในข้อความโดยใช้ html ได้ คุณไม่จำเป็นต้องเข้า css ด้วยซ้ำ แท็กนี้ใช้สำหรับสิ่งนี้

เส้นแนวนอนโดยใช้แท็ก html

---

คุณลักษณะแรกของแท็กนี้คือไม่มีแท็กปิดที่จับคู่กัน สามารถใช้ได้ทุกที่ในโค้ด html ระหว่างแท็ก และ

.

แท็กนี้มีคุณลักษณะดังต่อไปนี้:

• ความกว้าง– กำหนดความยาวของเส้นแนวนอนของเราเป็นพิกเซลหรือเปอร์เซ็นต์
• สี– กำหนดสีของเส้น;
• จัดตำแหน่ง– กำหนดการจัดตำแหน่งของเส้นไปที่ขอบขวา – ขวา, ขอบซ้าย – ซ้าย, ตรงกลาง – กึ่งกลาง;
• ขนาด– ความหนาของเส้นเป็นพิกเซล

ที่นี่ ตัวอย่าง html– รหัส