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

13

วิธีการเว้นระยะห่างระหว่างองค์ประกอบ TBODY

ฉันมีโต๊ะแบบนี้: <table> <tfoot> <tr><td>footer</td></tr> </tfoot> <tbody> <tr><td>Body 1</td></tr> <tr><td>Body 1</td></tr> <tr><td>Body 1</td></tr> </tbody> <tbody> <tr><td>Body 2</td></tr> <tr><td>Body 2</td></tr> <tr><td>Body 2</td></tr> </tbody> <tbody> <tr><td>Body 3</td></tr> <tr><td>Body 3</td></tr> <tr><td>Body 3</td></tr> </tbody> </table> ฉันต้องการเว้นระยะห่างระหว่างแต่ละองค์ประกอบ tbody แต่การเว้นระยะห่างและระยะขอบไม่มีผล ความคิดใด ๆ ?

99 html css

7

ลบรูปแบบทั้งหมดของปุ่ม HTML / ส่ง

มีวิธีลบสไตล์ของปุ่มใน Internet Explorer โดยสิ้นเชิงหรือไม่? ฉันใช้สไปรต์ css สำหรับปุ่มของฉันและทุกอย่างก็ดูโอเค แต่พอคลิกปุ่มมันจะเลื่อนไปด้านบนเล็กน้อยมันทำให้ดูไม่เป็นทรง มีสถานะการคลิก CSS หรือถูกเลื่อนลงหรือไม่? ฉันไม่รู้ว่าอะไรเป็นตัวกระตุ้นสถานะนั้น ฉันรู้ว่ามันไม่ใช่เรื่องใหญ่ แต่บางครั้งมันก็เป็นเรื่องเล็ก ๆ ที่สำคัญ

99 html css internet-explorer button state

5

วิธีทั่วไปในการเขียนตาราง HTML ด้วยส่วนหัวแนวตั้ง?

สวัสดีทั้งหมดเป็นเวลานานแล้วที่ฉันถามอะไรบางอย่างนี่เป็นสิ่งที่รบกวนฉันมาระยะหนึ่งแล้วคำถามนั้นอยู่ในชื่อ: วิธีใดที่คุณต้องการในการเขียนตาราง HTML ที่มีส่วนหัวแนวตั้ง โดยส่วนหัวแนวตั้งฉันหมายความว่าตารางมี<th>แท็กheader ( ) ทางด้านซ้าย (โดยทั่วไป) ส่วนหัวข้อมูลข้อมูลข้อมูล ส่วนหัว 2ข้อมูลข้อมูล ส่วนหัวข้อมูลข้อมูลข้อมูล3ข้อมูล พวกเขามีลักษณะเช่นนี้จนถึงตอนนี้ฉันมีสองตัวเลือก ตัวเลือกแรก <table id="vertical-1"> <caption>First Way</caption> <tr> <th>Header 1</th> <td>data</td><td>data</td><td>data</td> </tr> <tr> <th>Header 2</th> <td>data</td><td>data</td><td>data</td> </tr> <tr> <th>Header 2</th> <td>data</td><td>data</td><td>data</td> </tr> </table> ประโยชน์หลักของวิธีนี้คือการที่คุณมีส่วนหัว (ซ้ายจริง) ทางขวาถัดจากข้อมูลที่แสดงให้เห็นถึงสิ่งที่ฉันไม่ชอบ แต่เป็นว่า<thead>, <tbody>และ<tfoot>แท็กจะหายไปและมีวิธีการที่จะรวมพวกเขาโดยไม่ทำลาย วางองค์ประกอบไว้ด้วยกันอย่างสวยงามซึ่งนำฉันไปสู่ตัวเลือกที่สอง ตัวเลือกที่สอง <style type="text/css"> #vertical-2 thead,#vertical-2 tbody{ display:inline-block; } </style> …

99 html css datatable semantic-markup

9

โต๊ะล้นด้านนอก div

ฉันกำลังพยายามหยุดตารางที่มีการประกาศความกว้างอย่างชัดเจนไม่ให้ล้นเกินจากระดับdivบนสุด ฉันคิดว่าฉันสามารถทำได้โดยใช้วิธีใดวิธีหนึ่งmax-widthแต่ดูเหมือนจะไม่ได้ผล รหัสต่อไปนี้ (มีหน้าต่างเล็กมาก) จะทำให้เกิดสิ่งนี้: <style type="text/css"> #middlecol { width: 45%; border-right:2px solid red; } #middlecol table { max-width:100% !important; } </style> <div id="middlecol"> <center> <table width="400" cellpadding="3" cellspacing="0" border="0" align="center"> <tr> <td bgcolor="#DDFFFF" align="center" colspan="2"> <strong>Notification!</strong> </td> <tr> <td width="50"> <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0"> </td> <td> Lorem …

99 html css html-table

3

วิธีซ่อนแถบเลื่อนแนวตั้งเมื่อไม่จำเป็น

ฉันมี textarea ซึ่งอยู่ใน div เนื่องจากฉันมีคำใบ้ jquery และต้องการใช้ความทึบโดยไม่ต้องเปลี่ยนเส้นขอบ มีแถบเลื่อนแนวตั้งที่มองเห็นได้ว่าฉันต้องการให้สิ่งนี้แสดงเฉพาะเมื่อฉันพิมพ์ในช่องข้อความและมันอยู่เหนือคอนเทนเนอร์ ฉันได้ลองล้นแล้ว: อัตโนมัติ; แต่ไม่ได้ผล ช่องข้อความ: <label> <div id="name"> <textarea name="message" type="text" id="message" title="Enter Message Here" rows=9 cols=60 maxlength="2000"></textarea> </div> </label> รูปแบบ: #name { border: 1px solid #c810ca; width: 270px; height:159px; overflow: hidden; position: relative; } #message { height: 400px; width: 235px; overflow: hidden; …

99 html css forms

13

Bootstrap 4 ตารางตอบสนองจะไม่ใช้ความกว้าง 100%

ฉันกำลังสร้างเว็บแอปโดยใช้ Bootstrap 4 และพบปัญหาแปลก ๆ ฉันต้องการใช้คลาสที่ตอบสนองต่อตารางของ Bootstrap เพื่อให้สามารถเลื่อนตารางในแนวนอนบนอุปกรณ์มือถือได้ บนอุปกรณ์เดสก์ท็อปตารางควรใช้พื้นที่ 100% ของความกว้างของ DIV ทันทีที่ฉันใช้คลาส. table-responsive กับตารางของฉันตารางจะหดตัวในแนวนอนและไม่ใช้ความกว้าง 100% อีกต่อไป ความคิดใด ๆ ? นี่คือมาร์กอัปของฉัน: <!DOCTYPE html> <html lang="en" class="mdl-js"> <head> <title></title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="application-name" content=""> <meta name="theme-color" content="#000000"> <link rel="stylesheet" href="/css/bundle.min.css"> </head> <body> <div …

99 css bootstrap-4

4

คุณสมบัติ CSS: การแสดงผลเทียบกับการมองเห็น

อะไรคือความแตกต่างระหว่างคุณสมบัติการแสดงผลกับคุณสมบัติการมองเห็น?

98 css

6

CSS z-index ดอกไม้ paradox

ฉันต้องการสร้างเอฟเฟกต์ที่ขัดแย้งกันผ่านคุณสมบัติz-index CSS z-indexในรหัสของฉันฉันมีห้าวงการเช่นในภาพด้านล่างและพวกเขาจะทุกตำแหน่งอย่างไม่มีกำหนด ดังนั้นโดยค่าเริ่มต้นวงกลมทุกวงจะซ้อนทับกับวงกลมก่อนหน้า ตอนนี้วงกลม 5 ซ้อนทับวงกลม 1 (ภาพซ้าย) ความขัดแย้งที่ฉันต้องการบรรลุคือการมีในขณะเดียวกันวงกลม 1 ใต้วงกลม 2 และด้านบนของวงกลม 5 (ดังภาพด้านขวา) (ที่มา: schramek.cz ) นี่คือรหัสของฉัน มาร์กอัป: <div class="item i1">1</div> <div class="item i2">2</div> <div class="item i3">3</div> <div class="item i4">4</div> <div class="item i5">5</div> CSS .item { width: 50px; height: 50px; line-height: 50px; border: 1px solid red; background: …

98 css z-index

7

css z-index หายไปหลังจาก webkit แปลง translate3d

ฉันมีองค์ประกอบ div สองตำแหน่งที่ทับซ้อนกัน ทั้งสองได้ตั้งค่าดัชนี z ผ่าน css ฉันใช้การtranslate3dแปลง webkit เพื่อทำให้องค์ประกอบเหล่านี้เคลื่อนไหวออกจากหน้าจอจากนั้นกลับเข้าสู่หน้าจอ หลังจากที่เปลี่ยนองค์ประกอบไม่เคารพชุดของz-indexค่า ใครช่วยอธิบายได้ไหมว่าเกิดอะไรขึ้นกับ z-index / stack-order ขององค์ประกอบ div เมื่อฉันทำการแปลง webkit และอธิบายสิ่งที่ฉันสามารถทำได้เพื่อรักษาลำดับสแต็กขององค์ประกอบ div นี่คือข้อมูลเพิ่มเติมเกี่ยวกับวิธีการแปลงร่าง ก่อนการแปลงแต่ละองค์ประกอบจะได้รับค่าการเปลี่ยน webkit สองค่าที่กำหนดผ่าน css (ฉันใช้ jQuery เพื่อ.css()เรียกใช้ฟังก์ชัน: element.css({ '-webkit-transition-duration': duration + 's' }); element.css({ '-webkit-transition-property': '-webkit-transform' }); จากนั้นองค์ประกอบจะเคลื่อนไหวโดยใช้ translate3d -webkit-transform: element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, …

98 css webkit transform

1

เหตุใด Bootstrap 3 จึงเปลี่ยนไปใช้ box-sizing: border-box

ฉันกำลังย้ายธีม Bootstrap ของฉันจาก v2.3.2 เป็น v3.0.0 และสิ่งหนึ่งที่ฉันสังเกตเห็นคือมิติข้อมูลจำนวนมากถูกคำนวณแตกต่างกันเนื่องจากสไตล์ต่อไปนี้ใน bootstrap.css *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ใครช่วยอธิบายได้ไหมว่าทำไม Bootstrap ถึงเปลี่ยนขนาดกล่องขององค์ประกอบทั้งหมดเป็น border-box ฉันสงสัยว่ามันเกี่ยวข้องกับระบบกริดใหม่ที่เป็นเปอร์เซ็นต์ แต่ตัวเลือกด้านบนไม่ได้ใช้กับองค์ประกอบกริดเท่านั้น ดูเหมือน imho ที่รุนแรงไปหน่อย :-) ใครสนใจให้ข้อมูลเชิงลึกบ้าง?

98 css twitter-bootstrap twitter-bootstrap-3 boxsizer

9

ระยะขอบอัตโนมัติไม่ได้อยู่กึ่งกลางของภาพในหน้า

ในตัวอย่างนี้ภาพไม่ได้อยู่กึ่งกลาง ทำไม? เบราว์เซอร์ของฉันคือ Google Chrome v10 บน windows 7 ไม่ใช่ IE <img src="/img/logo.png" style="margin:0px auto;"/>

98 css google-chrome margin centering

18

ฉันจะลบโครงร่างรอบ ๆ ภาพไฮเปอร์ลิงก์ได้อย่างไร

เมื่อเราใช้การเปลี่ยนข้อความโดยใช้ CSS text-indent:-9999pxและให้ลบทดสอบเยื้องคือ จากนั้นเมื่อเราคลิกที่ลิงค์นั้นเส้นประจะปรากฏดังในภาพตัวอย่างด้านล่าง ทางออกสำหรับสิ่งนี้คืออะไร?

98 css

5

ช่องว่างระหว่าง divs - แสดงตารางเซลล์

ฉันมีสอง div ที่นี่: <div style="display:table-cell" id="div1"> content </div> <div style="display:table-cell" id="div2"> content </div> มีวิธีทำให้มีช่องว่างระหว่างสอง div (ที่มีdisplay:table-cell) นี้หรือไม่?

98 html css css-tables

5

CSS display: table-row ไม่ขยายเมื่อตั้งค่าความกว้างเป็น 100%

ฉันมีปัญหาเล็กน้อย ฉันใช้ FireFox 3.6 และมีโครงสร้าง DOM ดังต่อไปนี้: <div class="view-row"> <div class="view-type">Type</div> <div class="view-name">Name</div> </div> และ CSS ต่อไปนี้: .view-row { width:100%; display:table-row; } .view-name { display: table-cell; float:right; } .view-type { display: table-cell; } ถ้าฉันถอดdisplay:table-rowมันจะปรากฏขึ้นอย่างถูกต้องโดยview-rowแสดงความกว้าง 100% ถ้าใส่กลับมันจะหดลง ฉันใส่สิ่งนี้ไว้ใน JS Bin: http://jsbin.com/ifiyo เกิดอะไรขึ้น?

98 css

8

บล็อกการแสดงผลที่ไม่มีความกว้าง 100%

ฉันต้องการตั้งค่าองค์ประกอบช่วงให้ปรากฏด้านล่างองค์ประกอบอื่นโดยใช้คุณสมบัติการแสดงผล ฉันลองใช้อินไลน์บล็อก แต่ไม่ประสบความสำเร็จและคิดว่าฉันสามารถใช้บล็อกได้หากฉันพยายามหลีกเลี่ยงไม่ให้องค์ประกอบมีความกว้าง 100% (ฉันไม่ต้องการให้องค์ประกอบ "ยืดออก") สิ่งนี้สามารถทำได้หรือถ้าไม่ praxis ที่ดีสำหรับการแก้ปัญหาประเภทนี้คืออะไร? ตัวอย่าง: รายการข่าวที่ฉันต้องการตั้งค่าลิงก์ "อ่านเพิ่มเติม" ที่ส่วนท้ายของแต่ละโพสต์ (หมายเหตุ: <a>แทน<span>) <li> <span class="date">11/15/2012</span> <span class="title">Lorem ipsum dolor</span> <a class="read-more">Read more</a> </li> อัปเดต: แก้ไขแล้ว ใน CSS ใช้ li { clear: both; } li a { display: block; float: left; clear: both; }

98 html width block css

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