การเขียนโปรแกรม css

1

ตัวอย่างรูปภาพสำหรับโค้ดและมาร์กอัป Q & As [ปิด]

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่? อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ เมื่อจัดเตรียมMCVE / SSCCEที่เกี่ยวข้องกับรูปภาพการเข้าถึงรูปภาพโดยตรงจะมีประโยชน์ ประเภทของรูปภาพที่ครอบคลุมคำถามส่วนใหญ่ ได้แก่ รูปภาพขนาดเล็กที่มีหลายสีหรือหลายรูปทรง, GIF แบบเคลื่อนไหวที่มี / ไม่มีความโปร่งใส, JPEG ที่เป็น 'คู่' ของรูปภาพและสามารถใช้ในการเปลี่ยนภาพ, ชุดกระเบื้อง, สไปรต์ชีต .. มีภาพขนาดเล็ก (ต่ำกว่า 30KB) ในสถานที่อนุญาตและปลอดค่าลิขสิทธิ์ที่เราสามารถ hot-link สำหรับตัวอย่างประเภทนี้ได้หรือไม่

131 java javascript css image

5

การตั้งค่าความกว้างและความสูงบนแท็ก A

เป็นไปได้ไหมที่จะตั้งค่าความกว้างและความสูงเป็นพิกเซลบนแท็กจุดยึด ฉันต้องการให้แท็กจุดยึดมีภาพพื้นหลังในขณะที่เก็บข้อความไว้ในจุดยึด li { width: 32px; height: 32px; background-color: orange; } li a { width: 32px; height: 32px; background-color: red; } <li><a href="#">Something</a></li> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด

131 html css cross-browser

14

Overflow: hidden ใช้กับ <body> ทำงานบน iPhone Safari ได้หรือไม่

ไม่overflow:hiddenนำไปใช้กับ<body>การทำงานบน iPhone Safari? ดูเหมือนจะไม่ใช่ ฉันไม่สามารถสร้าง Wrapper บนเว็บไซต์ทั้งหมดเพื่อให้ได้สิ่งนั้น ... คุณรู้วิธีแก้ปัญหาหรือไม่? ตัวอย่าง: ฉันมีหน้ายาวและเพียงต้องการซ่อนเนื้อหาที่อยู่ใต้ "พับ" และควรใช้กับ iPhone / iPad

131 iphone css ipad safari overflow

4

CSS Pseudo-class ที่มีสไตล์อินไลน์

Наэтотвопросестьответына กองมากเกินнарусском : Какпрописать: เลื่อนвнутри style =' '? เป็นไปได้ไหมที่จะมีคลาสหลอกโดยใช้สไตล์อินไลน์ ตัวอย่าง: <a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> ฉันรู้ว่า HTML ข้างต้นใช้ไม่ได้ แต่มีบางอย่างที่คล้ายกันหรือไม่ ปล. ฉันรู้ว่าฉันควรใช้สไตล์ชีตภายนอกและฉันก็ทำ ฉันแค่อยากรู้ว่าสามารถทำได้โดยใช้สไตล์อินไลน์

131 html css css-selectors pseudo-class inline-styles

3

Flex: 1 หมายถึงอะไร?

ในฐานะที่เราทุกคนรู้ว่าflexคุณสมบัติเป็นชวเลขสำหรับflex-grow, flex-shrinkและflex-basisคุณสมบัติ ค่าเริ่มต้นคือ0 1 autoซึ่งหมายความว่า flex-grow: 0; flex-shrink: 1; flex-basis: auto; แต่ฉันได้สังเกตเห็นในหลายสถานที่flex: 1จะใช้ ชวเลขเพื่อ1 1 autoหรือ1 0 auto? ฉันไม่เข้าใจความหมายและฉันไม่ได้รับอะไรเลยเมื่อฉันใช้ Google

131 css flexbox

10

วิดีโอ YouTube ฝังผ่าน iframe ละเว้น z-index หรือไม่

ฉันกำลังพยายามใช้เมนูการนำทางแบบเลื่อนลงหลายระดับในแนวนอน ด้านล่าง (แนวตั้ง) เมนูฉันมีวิดีโอ YouTube ฝังผ่าน iframe หากฉันวางเมาส์เหนือรายการนำทางระดับหลักรายการใดรายการหนึ่งใน Firefox เมนูแบบเลื่อนลงจะปรากฏที่ด้านบนของวิดีโอ อย่างถูกต้อง อย่างไรก็ตามใน Chrome และ IE9 จะมีเพียงเศษเสี้ยวของเมนูแบบเลื่อนลงเท่านั้นที่มองเห็นได้ในพื้นที่เล็ก ๆ ที่ฉันมีระหว่างเมนูและ iframe ส่วนที่เหลือดูเหมือนว่าจะอยู่หลัง iframe ปัญหาน่าจะเกี่ยวข้องกับวิดีโอ YouTube ไม่ใช่ iframe ในการทดสอบฉันเล็ง iframe ไปที่เว็บไซต์อื่นแทนที่จะเป็นวิดีโอและเมนูแบบเลื่อนลงก็ทำงานได้ดีแม้ใน IE คำถามที่ 1: WTF? คำถามที่ 2: ทำไมแม้ว่าฉันจะใส่z-index:-999 !important; iframe อย่างชัดเจนปัญหานี้ก็ยังคงเกิดขึ้น มี CSS ภายในบางส่วนที่โค้ดฝังของ YouTube รวมอยู่ด้วยซึ่งกำลังลบล้างสิ่งต่างๆหรือไม่?

130 css iframe youtube

7

ลบล้างและรีเซ็ตสไตล์ CSS: อัตโนมัติหรือไม่มีเลยไม่ทำงาน

ฉันต้องการลบล้างสไตล์ CSS ต่อไปนี้ที่กำหนดไว้สำหรับตารางทั้งหมด: table { font-size: 12px; width: 100%; min-width: 400px; display:inline-table; } 'other'ฉันมีตารางที่เฉพาะเจาะจงกับชั้นที่เรียกว่า ในที่สุดการตกแต่งโต๊ะควรมีลักษณะดังนี้: table.other { font-size: 12px; } ดังนั้นผมจึงจำเป็นต้องเอา 3 คุณสมบัติ: width, min-widthและdisplay ฉันพยายามรีเซ็ตด้วยnoneหรือautoแต่ไม่ได้ผลฉันหมายถึงกรณีเหล่านี้: table.other { width: auto; min-width: auto; display:auto; } table.other { width: none; min-width: none; display:none; }

130 css width overriding

5

เหตุใดฉันจึงไม่สามารถจัดระยะขอบ: 0 อัตโนมัติได้

ฉันมี#headerdiv ที่อยู่100% widthภายใน div นั้นฉันมีรายการที่ไม่เรียงลำดับ ฉันได้นำไปใช้margin: 0 autoกับรายการที่ไม่เรียงลำดับ แต่จะไม่อยู่กึ่งกลางภายใน div ส่วนหัว ใครช่วยบอกฉันทีว่าทำไม? ผมคิดว่าถ้าผมกำหนดความกว้างของ div margin: 0 autoแม่แล้วรายการเรียงลำดับควรจะสามารถไปยังศูนย์ตัวเองด้วย ฉันขาดอะไรไป? นี่คือรหัสของฉัน: <style> * { margin: 0; padding: 0; } #header { width: 100%; background-color: #333; min-height: 160px; font-family:Arial, Helvetica, sans-serif; } #sitename { font-size: 50px; width: 620px; margin:0 auto; padding-top: 35px; color:#999; …

130 html css margin

5

เป็นไปได้ไหมที่จะเลือก n รายการสุดท้ายด้วยลูกที่ n

ใช้รายการมาตรฐานฉันกำลังพยายามเลือก 2 รายการสุดท้าย ฉันมีการเรียงสับเปลี่ยนต่างๆAn+Bแต่ดูเหมือนจะไม่มีอะไรให้เลือก 2 รายการสุดท้าย: li:nth-child(n+2) {} /* selects from the second onwards */ li:nth-child(n-2) {} /* selects everything */ li:nth-child(-n+2) {} /* selects first two only */ li:nth-child(-n-2) {} /* selects nothing */ ฉันทราบถึงตัวเลือก CSS3 ใหม่ที่ต้องการ:nth-last-child()แต่ฉันต้องการสิ่งที่ทำงานในเบราว์เซอร์อื่น ๆ อีกสองสามตัวถ้าเป็นไปได้ (อย่าสนใจ IE เป็นพิเศษ)

130 css css-selectors

9

ช่องว่างภายในอินพุตแบ่งความกว้าง 100%

โอเคเราจึงทราบดีว่าการตั้งค่าช่องว่างภายในวัตถุทำให้ความกว้างเปลี่ยนไปแม้ว่าจะตั้งค่าไว้อย่างชัดเจนก็ตาม ในขณะที่เราสามารถโต้แย้งตรรกะเบื้องหลังสิ่งนี้ได้ แต่ก็ทำให้เกิดปัญหากับองค์ประกอบบางอย่าง ในกรณีส่วนใหญ่คุณเพียงแค่เพิ่มองค์ประกอบลูกและเพิ่มช่องว่างภายในองค์ประกอบนั้นแทนที่จะตั้งค่าเป็น 100% แต่สำหรับอินพุตแบบฟอร์มนั่นไม่ใช่ขั้นตอนที่เป็นไปได้ ดูสิ่งนี้: http://sandman.net/test/formcss.html อินพุตที่สองมีช่องว่างภายในตั้งไว้ที่ 5px ซึ่งฉันชอบการตั้งค่าเริ่มต้นมาก แต่น่าเสียดายที่ทำให้อินพุตเพิ่มขึ้น 10px ในทุกทิศทางรวมถึงการเพิ่ม 10px ให้กับความกว้าง 100% ปัญหาคือฉันไม่สามารถเพิ่มองค์ประกอบลูกในอินพุตได้ดังนั้นฉันจึงไม่สามารถแก้ไขได้ ดังนั้นคำถามคือ: มีวิธีใดในการเพิ่มช่องว่างภายในอินพุตโดยที่ยังคงความกว้างไว้ได้ 100% ต้องเป็น 100% เนื่องจากแบบฟอร์มจะแสดงในพาเรนต์ที่มีความกว้างต่างกันดังนั้นฉันจึงไม่ทราบความกว้างของพาเรนต์ล่วงหน้า

130 css input padding

4

เหตุใดเปอร์เซ็นต์ระยะขอบ / ช่องว่างใน CSS จึงคำนวณเทียบกับความกว้างเสมอ

หากคุณดูข้อมูลจำเพาะโมเดลกล่อง CSSคุณจะสังเกตสิ่งต่อไปนี้: เปอร์เซ็นต์ [ระยะขอบ] คำนวณตามความกว้างของบล็อกที่มีกล่องที่สร้างขึ้น โปรดทราบว่านี่เป็นจริงสำหรับ "margin-top" และ "margin-bottom" เช่นกัน หากความกว้างของบล็อกที่มีขึ้นอยู่กับองค์ประกอบนี้เค้าโครงผลลัพธ์จะไม่ได้กำหนดไว้ใน CSS 2.1 (เน้นเหมือง) นี่เป็นความจริงแน่นอน แต่ทำไม ? มีอะไรในโลกที่บังคับให้ทุกคนออกแบบด้วยวิธีนี้? เป็นเรื่องง่ายที่จะนึกถึงสถานการณ์ที่คุณต้องการเช่นบางสิ่งบางอย่างจะต้องลดลง 25% จากด้านบนของหน้าเสมอ แต่ก็ยากที่จะหาเหตุผลว่าทำไมคุณถึงต้องการให้ช่องว่างในแนวตั้งเทียบกับขนาดแนวนอนของ ผู้ปกครอง นี่คือตัวอย่างของปรากฏการณ์ที่ฉันอ้างถึง: <div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;"> This div is 200x800. <div style="border: 1px solid blue; margin: 10% 0 0 …

130 w3c css

13

display: inline vs display: block

อะไรคือความแตกต่างพื้นฐานระหว่าง CSS ต่อไปนี้: display:inline และนี่: display:block การใช้สิ่งเหล่านี้แยกกันในองค์ประกอบฉันได้รับผลลัพธ์เดียวกัน

130 css

14

แท็ก HTML <sup /> มีผลต่อความสูงของบรรทัดจะทำให้สอดคล้องกันได้อย่างไร

หากฉันมี<sup>แท็กในแท็กแบบหลายบรรทัด<p>บรรทัดที่มีตัวยกจะมีระยะห่างระหว่างบรรทัดใหญ่กว่าบรรทัดอื่น ๆ โดยไม่คำนึงถึงความสูงของบรรทัดที่ฉันวางไว้บน<p>. แก้ไขเพื่อความกระจ่าง : ฉันไม่ได้หมายความว่าฉันมีจำนวนมาก<p>ซึ่งแต่ละอันอยู่ในบรรทัดเดียว ฉันมี<p>เนื้อหาเดียวที่มีเนื้อหาเพียงพอที่จะทำให้เกิดการตัดเป็นหลายบรรทัด บางแห่ง (ที่ใดก็ได้) ในข้อความอาจมี<sup>หรือ<sub>. สิ่งนี้มีผลต่อความสูงของบรรทัดสำหรับบรรทัดนั้นโดยการเพิ่มระยะห่างด้านบน / ด้านล่าง หากฉันตั้งค่าความสูงของเส้นที่ใหญ่กว่า<p>นี้จะไม่ทำให้เกิดความแตกต่างกับปัญหา ความสูงของเส้นจะเพิ่มขึ้น แต่ระยะห่างที่เพิ่มขึ้นยังคงอยู่ ฉันจะทำให้มันสอดคล้องกันได้อย่างไร - คือทุกบรรทัดมีระยะห่างเท่ากันไม่ว่าจะมี a <sup>หรือไม่? โซลูชันของคุณต้องเป็นแบบข้ามเบราว์เซอร์ (IE 6+, FF, safari, opera, chrome)

130 html css subscript superscript

7

ใช้ลิงก์ปกติเพื่อส่งแบบฟอร์ม

ฉันต้องการส่งแบบฟอร์ม แต่ฉันไม่ได้ใช้วิธีพื้นฐานในการใช้ปุ่มป้อนข้อมูลกับประเภทการส่ง แต่เป็นลิงก์ ภาพด้านล่างแสดงสาเหตุ ฉันใช้ลิงก์รูปภาพเพื่อบันทึก / ส่งแบบฟอร์ม เนื่องจากฉันมีมาร์กอัป css มาตรฐานสำหรับลิงก์รูปภาพฉันไม่ต้องการใช้ปุ่มส่งอินพุต ฉันพยายามใช้onClick = "document.formName.submit ()"กับองค์ประกอบ แต่ฉันต้องการวิธี html ความคิดใด ๆ ?

130 html css forms hyperlink submit

8

คลาสเทียบเท่า ".well" ใน Bootstrap 4 คืออะไร

ใน bootstrap-3 มี.wellคลาสที่เพิ่มเส้นขอบโค้งมนรอบ ๆ องค์ประกอบที่มีสีพื้นหลังสีเทาและช่องว่างภายในบางส่วน <div class="well">Basic Well</div> แต่ฉันไม่พบ.wellคลาสใด ๆใน bootstrap-4 มีแท็กใดเทียบเท่ากับ.wellใน bootstrap-4 หรือไม่?

130 css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 twitter-bootstrap-4

คำถามติดแท็ก css