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

CSS (Cascading Style Sheets) เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายลักษณะและการจัดรูปแบบของ HTML (HyperText Markup Language), XML (Extensible Markup Language) เอกสาร XML และ Extensible Markup Language รวมถึงองค์ประกอบ SVG รวมถึง (แต่ไม่ จำกัด เฉพาะ) สีโครงร่างแบบอักษร และภาพเคลื่อนไหว นอกจากนี้ยังอธิบายถึงวิธีการแสดงองค์ประกอบบนหน้าจอบนกระดาษคำพูดหรือบนสื่ออื่น ๆ

6
ขนาดตัวอักษรบางตัวแสดงผลใหญ่ขึ้นใน Safari (iPhone)
มี CSS หรือเหตุผลอื่น ๆ ที่ Safari / iPhone ละเว้นการตั้งค่าขนาดตัวอักษรหรือไม่? ในเว็บไซต์เฉพาะของฉัน Safari บน iPhone แสดงผลขนาดตัวอักษร: ข้อความ 13px ใหญ่กว่าขนาดตัวอักษร: ข้อความ 15px อาจไม่รองรับขนาดตัวอักษรในบางองค์ประกอบหรือไม่?

9
html (+ css): แสดงตำแหน่งที่ต้องการสำหรับการแบ่งบรรทัด
สมมติว่าฉันมีข้อความนี้ที่ต้องการแสดงในเซลล์ตาราง HTML: Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks และฉันต้องการให้เส้นแบ่งตามหลักเครื่องหมายจุลภาค มีวิธีบอกให้ HTML renderer ลองทำลายในจุดที่กำหนดและทำก่อนที่จะพยายามแบ่งช่องว่างหลังหนึ่งโดยไม่ใช้ช่องว่างที่ไม่ทำลายหรือไม่ ถ้าฉันใช้ช่องว่างที่ไม่ทำลายมันจะทำให้ความกว้างใหญ่ขึ้นโดยไม่มีเงื่อนไข ฉันต้องการให้เส้นแบ่งเกิดขึ้นหลังจากช่องว่างใดช่องหนึ่งหากอัลกอริทึมการตัดบรรทัดได้ลองใช้ด้วยเครื่องหมายจุลภาคก่อนและไม่สามารถทำให้เส้นพอดีได้ ฉันลองตัดส่วนข้อความใน<span>องค์ประกอบ แต่ดูเหมือนจะไม่เป็นประโยชน์อะไรเลย <html> <head> <style type="text/css"> div.box { width: 180px; } table, table td …
110 html  css  word-wrap 

12
พื้นที่สีขาวปรากฏขึ้นทางด้านขวาของหน้าเมื่อภาพพื้นหลังควรขยายเต็มความยาวของหน้า [ปิด]
ปิด. คำถามนี้ต้องการรายละเอียดการแก้จุดบกพร่อง ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ภาพพื้นหลังหน้าเว็บของเรากำลังมีปัญหาใน FireFox และ Safari ใน iOS บน iPads / iPhones ที่มีพื้นที่สีขาวปรากฏขึ้นทางด้านขวาของหน้า ภาพพื้นหลังสามารถขยายได้ดีในเบราว์เซอร์อื่น ๆ แต่เราประสบปัญหาที่จะไม่ขยายความยาวเต็มของเบราว์เซอร์บนเบราว์เซอร์เหล่านั้น ลองดูเว็บไซต์ของเราใน FireFoxเพื่อดูว่าฉันหมายถึงอะไร
110 html  css 

8
จะรับ div สองตัวนี้เคียงข้างกันได้อย่างไร?
ฉันมีสอง div ที่ไม่ได้ซ้อนกันอันหนึ่งอยู่ด้านล่างอีกอัน ทั้งคู่อยู่ใน div พาเรนต์เดียวและ div พาเรนต์นี้ซ้ำตัวเอง โดยพื้นฐานแล้ว: <div id='parent_div_1'> <div class='child_div_1'></div> <div class='child_div_2'></div> </div> <div id='parent_div_2'> <div class='child_div_1'></div> <div class='child_div_2'></div> </div> <div id='parent_div_3'> <div class='child_div_1'></div> <div class='child_div_2'></div> </div> ฉันต้องการที่จะได้รับแต่ละคู่ของchild_div_1และchild_div_2ติดกัน ฉันจะทำเช่นนี้ได้อย่างไร?
110 css  layout  html 

7
จะสร้างเงากล่องใส่เพียงด้านเดียวได้อย่างไร?
เป็นไปได้ไหมที่จะมีเพียง box-shadow ด้านเดียวของ div? โปรดทราบว่าฉันกำลังพูดถึงเงากล่องที่ใส่ไว้ที่นี่ไม่ใช่เงากล่องด้านนอกปกติ ตัวอย่างเช่นใน JSFiddle ต่อไปนี้คุณจะเห็นว่าเงาที่แทรกอยู่ปรากฏขึ้นทั้ง 4 ด้านในองศาที่แตกต่างกัน ฉันจะทำให้มันแสดงเฉพาะที่ด้านบนได้อย่างไร หรือมากที่สุดเท่านั้นที่ด้านบนและด้านล่าง? JSFiddle: http://jsfiddle.net/ahmadka/KFrun/ .box { -webkit-box-shadow: inset 0px 5px 10px 1px #000000; box-shadow: inset 0px 5px 10px 1px #000000; } .text { padding: 20px; } <div class="box"> <div class="text"> Lorem ipsum .... </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด
110 css 

6
jQuery เปลี่ยนรูปแบบขององค์ประกอบ HTML
ฉันมีรายการเกี่ยวกับ HTML <div id="header" class="row"> <div id="logo" class="col_12">And the winner is<span>n't...</span></div> <div id="navigation" class="row"> <ul id="pirra"> <li><a href="#">Why?</a></li> <li><a href="#">Synopsis</a></li> <li><a href="#">Stills/Photos</a></li> <li><a href="#">Videos/clips</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Quiz</a></li> </ul> </div> มันเปลี่ยนแปลงได้ดีในการแสดงแนวนอนในการเปลี่ยนแปลง CSS div#navigation ul li { display: inline-block; } แต่ตอนนี้ฉันต้องการทำกับ jQuery ฉันใช้: $(document).ready(function() { console.log('hello'); $('#navigation ul li').css('display': 'inline-block'); }); …
110 jquery  html  css 

7
ฉันจะเพิ่มแถบเลื่อนแนวตั้งให้กับ div โดยอัตโนมัติได้อย่างไร
ฉันต้องการเพิ่มแถบเลื่อนแนวตั้งใน<div>ไฟล์. ฉันได้ลองoverflow: autoแล้ว แต่ใช้งานไม่ได้ ฉันได้ทดสอบโค้ดของฉันใน Firefox และ Chrome แล้ว ฉันวางโค้ดสไตล์ div ที่นี่: float: left; width: 1000px; overflow: auto;
110 css  html  scrollbar  overflow 

8
ลำดับความสำคัญของ CSS คืออะไร?
ฉันพยายามหาสาเหตุว่าทำไมคลาส css ของฉันถึงแทนที่อีกคลาส (ไม่ใช่วิธีอื่น) ที่นี่ฉันมีคลาส css สองคลาส .smallbox { background-color: white; height: 75px; width: 150px; font-size:20px; box-shadow: 0 0 10px #ccc; font-family: inherit; } .smallbox-paysummary { @extend .smallbox; font-size:10px; } และในมุมมองของฉันฉันเรียก <pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> แบบอักษร (องค์ประกอบที่ทับซ้อนกัน) แสดงเป็น 10px แทนที่จะเป็น 20 - มีใครอธิบายได้ไหมว่าทำไมจึงเป็นเช่นนั้น
110 html  css 

6
วิธีทำให้ <button> ใน Bootstrap ดูเหมือนลิงค์ปกติใน nav-tabs?
ฉันทำงานใน (เดิมคือ Twitter) Bootstrap 2 และฉันต้องการจัดรูปแบบปุ่มให้เหมือนกับว่าเป็นลิงก์ปกติ ไม่ใช่แค่ลิงค์ธรรมดา ๆ แต่; สิ่งเหล่านี้จะอยู่ใน&lt;ul class="nav nav-tabs nav-stacked"&gt;ภาชนะ มาร์กอัปจะลงเอยเช่นนี้: &lt;form action="..." method="post"&gt; &lt;div class="row-fluid"&gt; &lt;!-- Navigation for the form --&gt; &lt;div class="span3"&gt; &lt;ul class="nav nav-tabs nav-stacked"&gt; &lt;li&gt;&lt;button type="submit" name="op" value="Link 1"&gt;Link 1&lt;/button&gt;&lt;/li&gt; &lt;li&gt;&lt;button type="submit" name="op" value="Link 2"&gt;Link 2&lt;/button&gt;&lt;/li&gt; &lt;!-- ... --&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- The …

4
การระบุรูปแบบและน้ำหนักสำหรับ Google Fonts
ฉันใช้แบบอักษร Google ในหน้าเว็บไม่กี่หน้าและชนกำแพงเมื่อพยายามใช้แบบอักษรรูปแบบต่างๆ ตัวอย่าง: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans ฉันกำลังนำเข้าสามใบหน้า Normal, Bold, ExtraBold ผ่านแท็กลิงก์ ใบหน้าปกติแสดงอย่างถูกต้อง แต่ฉันไม่สามารถหาวิธีใช้แบบอักษรใน CSS ของฉันได้ ฉันลองสิ่งต่อไปนี้ทั้งหมดเป็นแอตทริบิวต์สำหรับตระกูลฟอนต์ แต่ไม่มีลูกเต๋า: 'เปิด Sans Bold' 'เปิด Sans 700' 'เปิด Sans Bold 700' 'Open Sans: ตัวหนา' Google เอกสารเองไม่ได้ให้ความช่วยเหลือมากนัก ใครมีความคิดว่าฉันควรเขียนกฎ CSS เพื่อแสดงตัวแปรเหล่านี้อย่างไร
110 css  fonts 


8
การเปลี่ยนขนาดรูปภาพตามสัดส่วนโดยใช้ CSS?
ฉันพยายามมาสองสามวันแล้วเพื่อกำหนดค่าแกลเลอรีภาพขนาดย่อของฉันเพื่อให้ภาพทั้งหมดมีความสูงและความกว้างเท่ากัน อย่างไรก็ตามเมื่อฉันเปลี่ยนรหัส Css เป็น max-height: 150px; max-width: 200px; width: 120px; height: 120px; ฉันได้ภาพที่มีขนาดเท่ากันทั้งหมด แต่อัตราส่วนกว้างยาวทำให้ภาพเสียหาย ไม่มีวิธีปรับขนาดคอนเทนเนอร์รูปภาพและไม่ใช้รูปภาพแทนหรือไม่ ทำให้ฉันสามารถรักษาอัตราส่วน แต่ปรับขนาดภาพให้นิ่ง (ฉันไม่รังเกียจถ้าฉันตัดภาพบางส่วนออกไป) ขอบคุณล่วงหน้า!
110 html  css  gallery  lightbox 

11
ScrollIntoView () ทำให้ทั้งหน้าเลื่อน
ฉันใช้ ScrollIntoView () เพื่อเลื่อนรายการที่ไฮไลต์ในรายการเพื่อดู เมื่อฉันเลื่อนลงไปด้านล่าง ScrollIntoView (false) จะทำงานได้อย่างสมบูรณ์ แต่เมื่อฉันเลื่อนขึ้นไป ScrollIntoView (จริง) ทำให้ทั้งหน้าขยับเล็กน้อยซึ่งฉันคิดว่าตั้งใจ มีวิธีหลีกเลี่ยงการย้ายทั้งหน้าเมื่อใช้ ScrollIntoView (จริง) หรือไม่? นี่คือโครงสร้างของหน้าของฉัน - #listOfDivs { position:fixed; top:100px; width: 300px; height: 300px; overflow-y: scroll; } &lt;div="container"&gt; &lt;div="content"&gt; &lt;div id="listOfDivs"&gt; &lt;div id="item1"&gt; &lt;/div&gt; &lt;div id="item2"&gt; &lt;/div&gt; &lt;div id="itemn"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; listOfDivs มาจาก ajax call ใช้ซาฟารีมือถือ …
110 javascript  css 

10
ฉันจะทำให้เอฟเฟกต์แก้ว / เบลอ CSS ทำงานสำหรับภาพซ้อนทับได้อย่างไร
ฉันมีปัญหาในการใช้เอฟเฟกต์เบลอใน div ภาพซ้อนทับแบบกึ่งโปร่งใส ฉันต้องการให้ทุกอย่างที่อยู่เบื้องหลัง div เบลอเช่นนี้: นี่คือ jsfiddle ที่ใช้ไม่ได้: http://jsfiddle.net/u2y2091z/ มีความคิดอย่างไรในการทำงานนี้? ฉันต้องการให้สิ่งนี้ไม่ซับซ้อนที่สุดเท่าที่จะเป็นไปได้และกำหนดให้เป็นข้ามเบราว์เซอร์ นี่คือ CSS ที่ฉันใช้: #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); }
110 html  css  blur  css-filters 

2
แถวที่มีความสูงเท่ากันใน CSS Grid Layout
ฉันรวบรวมว่าสิ่งนี้เป็นไปไม่ได้ที่จะใช้ Flexbox เนื่องจากแต่ละแถวมีความสูงเพียงเล็กน้อยเท่านั้นที่จำเป็นเพื่อให้พอดีกับองค์ประกอบ แต่สามารถทำได้โดยใช้ CSS Grid ที่ใหม่กว่าหรือไม่ เพื่อความชัดเจนฉันต้องการความสูงเท่ากันสำหรับองค์ประกอบทั้งหมดในตารางในทุกแถวไม่ใช่แค่ต่อแต่ละแถว โดยทั่วไป "เซลล์" ที่สูงที่สุดควรกำหนดความสูงของเซลล์ทั้งหมดไม่ใช่เฉพาะเซลล์ที่อยู่ในแถวเท่านั้น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.