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

5

วิธีป้องกันข้อความในเซลล์ตารางจากการตัดคำ

ไม่มีใครรู้วิธีที่ฉันสามารถป้องกันข้อความในเซลล์ตารางจากการห่อ? นี่เป็นส่วนหัวของตารางและหัวเรื่องนั้นยาวกว่าข้อมูลที่อยู่ใต้ตาราง แต่ฉันต้องการให้แสดงเพียงบรรทัดเดียว ไม่เป็นไรถ้าคอลัมน์กว้างมาก HTML ของตารางของฉัน (เรียบง่าย) มีลักษณะดังนี้: <table> <thead> <tr> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long …

285 html css

7

SVG แบบอินไลน์ใน CSS

เป็นไปได้หรือไม่ที่จะใช้คำนิยาม SVG แบบอินไลน์ใน CSS? ฉันหมายถึงสิ่งที่ชอบ: .my-class { background-image: <svg>...</svg>; }

284 css svg

6

วิธีการปรับรายการ flexbox เดียว (แทนที่ justify-content)

คุณสามารถแทนที่align-itemsด้วยalign-selfสำหรับรายการที่ยืดหยุ่น ฉันกำลังมองหาวิธีที่จะแทนที่justify-contentรายการที่ยืดหยุ่น หากคุณมี flexbox container justify-content:flex-endแต่คุณต้องการให้ไอเท็มแรกเป็นแบบjustify-content: flex-startนั้นทำได้อย่างไร? นี่คือคำตอบที่ดีที่สุดโดยโพสต์นี้: https://stackoverflow.com/a/33856609/269396

283 css flexbox

30

ฉันจะได้ div เพื่อลอยไปที่ด้านล่างของคอนเทนเนอร์ได้อย่างไร

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

282 html css

6

ลอย: ด้านซ้าย; vs display: อินไลน์; vs display: inline-block; vs display: table-cell;

คำถามของฉัน เป็นวิธีการใดที่ต้องการโดยนักออกแบบเว็บไซต์มืออาชีพ? มีวิธีการใด ๆ เหล่านี้ที่สร้างขึ้นโดยเว็บเบราว์เซอร์เมื่อวาดเว็บไซต์หรือไม่ นี่เป็นเพียงการตั้งค่าส่วนตัวทั้งหมดหรือไม่ มีเทคนิคอื่นที่ฉันขาดหายไปไหม หมายเหตุ: คำถามข้างต้นเกี่ยวข้องกับการออกแบบเค้าโครงหลายคอลัมน์ ลอย: ด้านซ้าย; http://jsfiddle.net/CDe6a/ นี่เป็นวิธีที่ฉันใช้เสมอเมื่อสร้างเค้าโครงคอลัมน์และดูเหมือนว่าจะใช้ได้ดี แม้ว่าผู้ปกครองจะล่มสลายในตัวเองดังนั้นคุณเพียงแค่ต้องจำไว้ในclear:both;ภายหลัง อีกนักโทษที่ฉันเพิ่งพบคือไม่สามารถที่จะจัดข้อความชิดในแนวตั้ง แสดง: อินไลน์; ดูเหมือนว่าจะแก้ไขปัญหาการยุบตัวของแม่ แต่เพิ่มช่องว่าง http://jsfiddle.net/CDe6a/1/ การลบช่องว่างออกจาก html ดูเหมือนจะเป็นการแก้ไขปัญหาที่ง่ายที่สุด แต่ไม่ต้องการถ้าคุณจู้จี้จุกจิกเกี่ยวกับ html ของคุณ http://jsfiddle.net/CDe6a/2/ แสดง: อินไลน์บล็อก ดูเหมือนว่าจะมีพฤติกรรมเหมือนdisplay:inline;กัน http://jsfiddle.net/CDe6a/3/ แสดง: ตารางเซลล์ http://jsfiddle.net/CDe6a/4/ ทำงานได้สมบูรณ์แบบ ความคิดของฉัน: ฉันแน่ใจว่าฉันทำสิ่งต่าง ๆ ขาดหายไปเช่นข้อยกเว้นบางอย่างที่จะทำลายเค้าโครง แต่display:table-cell;ดูเหมือนว่าจะทำงานได้ดีที่สุดและฉันคิดว่าฉันจะเริ่มแทนที่float:left;เมื่อฉันดูเหมือนจะสับสนอยู่clear:both;เสมอ ฉันได้อ่านบทความและบล็อกจำนวนมากเกี่ยวกับเรื่องนี้ในเว็บ แต่ไม่มีใครตอบคำถามที่ชัดเจนเกี่ยวกับสิ่งที่ฉันควรใช้เมื่อจัดวางเว็บไซต์ของฉัน

281 html css css-float

9

ฉันจะจัดองค์ประกอบที่เป็นคู่และคี่ได้อย่างไร

เป็นไปได้ไหมที่จะใช้ CSS pseudo-classes เพื่อเลือกอินสแตนซ์ของรายการคู่และคี่ ฉันคาดว่าสิ่งต่อไปนี้จะสร้างรายการของสีที่สลับกัน แต่ฉันจะได้รับรายการของสีน้ำเงิน: <html> <head> <style> li { color: blue } li:odd { color:green } li:even { color:red } </style> </head> <body> <ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul> </body> </html>

281 html css css-selectors

8

ซ่อน html ตามแนวนอน แต่ไม่ใช่แถบเลื่อนแนวตั้ง

ฉันมี HTML textarea ที่มีความกว้างคงที่ แต่ความสูงของตัวแปร ฉันต้องการตั้งค่าoverflow:scrollและสามารถแสดงแถบเลื่อนแนวตั้ง แต่ไม่ใช่แนวนอน ฉันไม่สามารถใช้งานได้overflow:autoเนื่องจากสิ่งอื่นที่เฉพาะเจาะจงกับสถานการณ์ของฉัน ฉันรู้ว่าไม่มีวิธีใช้ CSS2 เพื่อแสดงเฉพาะแถบเลื่อนแนวตั้ง แต่ไม่ใช่แนวนอน มีอะไรที่ฉันสามารถทำกับ JavaScript เพื่อซ่อนแถบเลื่อนแนวนอนได้หรือไม่?

279 html css scrollbar

9

ใช้ไอคอน Font Awesome เป็นเนื้อหา CSS

ฉันต้องการใช้ไอคอน Font Awesome เป็นเนื้อหา CSS เช่น a:before { content: "<i class='fa...'>...</i>"; } ฉันรู้ว่าฉันไม่สามารถใช้รหัส HTML contentได้ดังนั้นจึงเหลือเฉพาะภาพเท่านั้น

279 html css font-awesome

15

ดีบักเกอร์ที่เหมือน Firebug สำหรับ Google Chrome

มีอะไรอย่างเช่น Firebug ที่คุณสามารถใช้ใน Google Chrome ได้บ้าง? คุณสมบัติที่สำคัญที่ฉันต้องการ: ตรวจสอบแหล่งที่มา HTML (องค์ประกอบที่เลือกลบพวกเขา ฯลฯ ) ตรวจสอบค่า CSS (วิธีแก้ปัญหาในตัวแปลก, อย่างใด)

278 html css google-chrome debugging firebug

14

WebKit คืออะไรและเกี่ยวข้องกับ CSS อย่างไร

เมื่อเร็ว ๆ นี้ฉันได้เห็นคำถามด้วยแท็ก "webkit" คำถามดังกล่าวมักจะเป็นคำถามทางเว็บที่เกี่ยวข้องกับ CSS, jQuery, เลย์เอาต์, ปัญหาความเข้ากันได้ของเบราว์เซอร์ข้าม ฯลฯ ดังนั้น "webkit" นี้คืออะไรและเกี่ยวข้องกับ CSS อย่างไร ฉันได้สังเกตเห็น-webkit-...คุณสมบัติมากมายในซอร์สโค้ดสำหรับเว็บไซต์ต่างๆ ทั้งสองเกี่ยวข้องกันไหม? ปรับปรุง ดังนั้นจากคำตอบจนถึงตอนนี้ ... WebKit เป็นเครื่องมือแสดงผลเว็บเบราว์เซอร์ HTML / CSS สำหรับ Safari / Chrome มีเอ็นจิ้นดังกล่าวสำหรับ IE / Opera / Firefox และอะไรคือความแตกต่างข้อดีและข้อเสียของการใช้อันใดอันหนึ่ง? ฉันสามารถใช้คุณสมบัติ WebKit ใน Firefox ได้หรือไม่ คำถามสุดท้าย ... IE รองรับ WebKit หรือไม่ อัปเดต 2 เบราว์เซอร์หลักทั้งหมดใช้เอนจิ้นการแสดงผลที่แตกต่างกัน …

277 css webkit cross-browser rendering-engine

4

ฉันจะนำสไตล์ไปใช้กับหลายคลาสพร้อมกันได้อย่างไร

ฉันต้องการสองคลาสที่มีชื่อแตกต่างกันเพื่อให้มีคุณสมบัติเดียวกันใน CSS ฉันไม่ต้องการที่จะทำซ้ำรหัส .abc { margin-left:20px; } .xyz { margin-left:20px; } <a class="abc">Lorem</a> <a class="xyz">Ipsum</a> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เนื่องจากทั้งสองคลาสกำลังทำสิ่งเดียวกันฉันควรจะรวมเข้าเป็นหนึ่งเดียว ฉันจะทำสิ่งนั้นได้อย่างไร

277 css css-selectors

9

ปุ่มทำให้กว้างเต็มหรือไม่

ฉันต้องการปุ่มที่จะใช้ความกว้างเต็มของคอลัมน์ แต่มีปัญหา ... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> ฉันจะทำให้ปุ่มกว้างเท่ากับคอลัมน์ได้อย่างไร

276 css twitter-bootstrap html responsive-design

7

อะไรคือความแตกต่างระหว่าง: มุ่งเน้นและ: ใช้งานอยู่?

อะไรคือความแตกต่างระหว่าง:focusและ:activeคลาสหลอก?

275 css css-selectors pseudo-class

3

เพิ่มช่องว่าง (“”) หลังจากองค์ประกอบที่ใช้: หลัง

ฉันต้องการเพิ่มพื้นที่ว่างหลังจากเนื้อหาบางส่วน แต่content: " ";ดูเหมือนจะไม่ทำงาน นี่คือรหัสของฉัน: h2:after { content: " "; } ... ซึ่งใช้งานไม่ได้อย่างไรก็ตามสิ่งนี้จะ: h2:after { content: "-"; } ผมทำอะไรผิดหรือเปล่า?

274 css

17

เส้นขอบไล่ระดับสี

ฉันพยายามใช้การไล่ระดับสีกับเส้นขอบฉันคิดว่ามันง่ายเหมือนการทำสิ่งนี้: border-color: -moz-linear-gradient(top, #555555, #111111); แต่มันไม่ทำงาน ไม่มีใครรู้ว่าวิธีที่ถูกต้องในการทำ gradients ชายแดนคืออะไร?

274 css gradient

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