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

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


5
มีวิธีใดในการประกาศขนาด / เส้นขอบบางส่วนให้กับกล่องหรือไม่?
มีวิธีใดในการประกาศขนาด / เส้นขอบบางส่วนให้กับกล่องใน CSS? ยกตัวอย่างเช่นกล่องกับว่ามีเพียงแสดงให้เห็นถึงขอบล่างในที่หนึ่งของมัน350px 60pxผมคิดว่าอาจมีประโยชน์มาก ตัวอย่าง:
105 css  border 

6
ตำแหน่ง: ค่าสัมบูรณ์และส่วนสูงของผู้ปกครอง?
ฉันมีตู้คอนเทนเนอร์และลูก ๆ ของพวกเขาอยู่ในตำแหน่งที่แน่นอน / ค่อนข้างสูง จะตั้งความสูงของตู้คอนเทนเนอร์อย่างไรให้ลูก ๆ อยู่ข้างใน? นี่คือรหัส: HTML <section id="foo"> <header>Foo</header> <article> <div class="one"></div> <div class="two"></div> </article> </section> <div style="clear:both">Clear won't do.</div> <!-- I want to have a gap between sections here --> <section id="bar"> <header>bar</header> <article> <div class="one"></div><div></div> <div class="two"></div> </article> </section> CSS article { position: relative; …
105 html  css  position  height  absolute 

6
SVG ไล่ระดับโดยใช้ CSS
ฉันกำลังพยายามนำการไล่ระดับสีไปใช้กับrectองค์ประกอบSVG ขณะนี้ฉันใช้fillแอตทริบิวต์ ในไฟล์ CSS ของฉัน: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } และrectองค์ประกอบมีสีเติมที่ถูกต้องเมื่อดูในเบราว์เซอร์ อย่างไรก็ตามฉันต้องการทราบว่าฉันสามารถใช้การไล่ระดับสีเชิงเส้นกับองค์ประกอบนี้ได้หรือไม่

9
ฉันจะจัดข้อความให้ชิดซ้ายและข้อความไปทางขวาเป็นบรรทัดเดียวกันได้อย่างไร
ฉันจะจัดแนวข้อความเพื่อให้บางส่วนจัดแนวไปทางซ้ายและบางส่วนจัดแนวไปทางขวาในบรรทัดเดียวกันได้อย่างไร <p>This text should be left-aligned. This text should be right aligned.</p> ฉันสามารถจัดแนวข้อความทั้งหมดไปทางซ้าย (หรือทางขวา) ไม่ว่าจะเป็นแบบอินไลน์โดยตรงหรือโดยใช้สไตล์ชีต - <p style='text-align: left'>This text should be left-aligned. This text should be right aligned.</p> ฉันจะจัดแนวข้อความที่สอดคล้องกันไปทางซ้ายและทางขวาโดยให้อยู่ในบรรทัดเดียวกันได้อย่างไร
105 html  css 

13
แทนที่ประเภทอินพุต = ไฟล์ด้วยรูปภาพ
เช่นเดียวกับผู้คนจำนวนมากที่ฉันต้องการที่จะปรับแต่งที่น่าเกลียดinput type=fileและฉันรู้ว่ามันไม่สามารถทำได้โดยไม่ต้อง hacks javascriptบางส่วนและ แต่ปัญหาก็คือในกรณีของฉันปุ่มไฟล์อัปโหลดมีไว้สำหรับอัปโหลดภาพเท่านั้น ( jpeg | jpg | png | gif ) ดังนั้นฉันจึงสงสัยว่าฉันสามารถใช้clickableภาพ "" ซึ่งจะทำหน้าที่เป็นไฟล์ประเภทอินพุตได้หรือไม่ ( แสดงกล่องโต้ตอบและ $ _FILE เดียวกันในหน้าที่ส่ง) ฉันพบวิธีแก้ปัญหาบางอย่างที่นี่และสิ่งนี้ก็น่าสนใจเช่นกัน (แต่ใช้ไม่ได้กับ Chrome = /) พวกคุณทำอะไรเมื่อคุณต้องการเพิ่มสไตล์ให้กับปุ่มไฟล์ของคุณ? หากคุณมีมุมมองใด ๆ เกี่ยวกับเรื่องนี้เพียงแค่กดปุ่มรับสาย;)
105 css  image  file  button  input 

10
ดูความกว้าง 80% ของพาเรนต์ใน React Native
ฉันกำลังสร้างแบบฟอร์มใน React Native และต้องการทำให้TextInput80% ของความกว้างหน้าจอ ด้วย HTML และ CSS ธรรมดาสิ่งนี้จะตรงไปตรงมา: input { display: block; width: 80%; margin: auto; } ยกเว้นว่า React Native ไม่รองรับdisplayคุณสมบัติเปอร์เซ็นต์ความกว้างหรือระยะขอบอัตโนมัติ แล้วฉันจะทำอย่างไรดี? มีการอภิปรายเกี่ยวกับปัญหานี้ในเครื่องมือติดตามปัญหาของ React Native แต่วิธีแก้ปัญหาที่เสนอดูเหมือนเป็นการแฮ็กที่น่ารังเกียจ

14
ส่งออกการเปลี่ยนแปลง CSS จากตัวตรวจสอบ (webkit, firebug ฯลฯ )
เมื่อฉันทำงานกับ CSS ฉันมักจะทดสอบในเบราว์เซอร์เช่น Chrome คลิกขวาที่องค์ประกอบคลิกตรวจสอบองค์ประกอบและแก้ไข CSS ที่นั่น การใช้ปุ่มลูกศรเพื่อเปลี่ยนสิ่งต่างๆเช่นระยะขอบและช่องว่างภายในทำให้การจัดเรียงสิ่งต่างๆทำได้ง่ายมาก ไม่ใช่เรื่องยากเกินไปที่จะนำการเปลี่ยนแปลงเหล่านั้นไปใช้กับไฟล์ CSS แต่มันจะดีมากถ้าฉันสามารถคลิกขวาที่ตัวเลือกในตัวตรวจสอบแล้วเลือก "ส่งออก" หรือ "คัดลอก" และมีเนื้อหาอยู่ใน คลิปบอร์ด สิ่งนี้มีอยู่จริงหรือไม่?


7
วิธีการจำลองเลย์เอาต์การซ้อน div สัมบูรณ์ของ pinterest.com [ปิด]
ปิด . คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เน้นไปที่ปัญหาเดียวโดยแก้ไขโพสต์นี้เท่านั้น ปิดให้บริการใน7 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันต้องการจำลองเค้าโครง div ของ Pinterest.com โดยเฉพาะการปรับจำนวนคอลัมน์ให้พอดีกับการปรับขนาดเบราว์เซอร์มากขึ้น / น้อยลงและการเรียงซ้อนในแนวตั้งไม่ได้ขึ้นอยู่กับความสูงของคอลัมน์ที่อยู่ติดกัน ซอร์สโค้ดแสดงว่าแต่ละ div เป็นตำแหน่งสัมบูรณ์ ผู้ร่วมก่อตั้งได้ตอบโพสต์ Quora โดยระบุว่าทำด้วย jQuery และ CSS ที่กำหนดเอง ฉันต้องการให้ผลลัพธ์เรียงจากซ้ายไปขวา ทิศทางใด ๆ ที่คุณสามารถให้เพื่อทำให้ตัวเองได้รับการชื่นชมอย่างมาก
104 jquery  css  layout 

7
ฉันจะใช้คลาส CSS กับ Html.ActionLink ใน ASP.NET MVC ได้อย่างไร
ฉันกำลังสร้างแอปพลิเคชั่นASP.NET MVCโดยใช้VB.NETและฉันกำลังพยายามใช้คลาส css กับHtml.ActionLinkโค้ด: <%=Html.ActionLink("Home", "Index", "Home", new {@class = "tab" })%> แต่เมื่อฉันเรียกใช้รหัสฉันได้รับข้อผิดพลาดด้านล่าง: ข้อความแสดงข้อผิดพลาดของคอมไพเลอร์: BC30988: คาดว่าจะพิมพ์หรือ "ด้วย" ฉันยังใหม่กับMVCและไม่ค่อยมีเงื่อนงำว่าฉันกำลังทำอะไรอยู่ดังนั้นฉันจึงไม่เห็นว่ามีอะไรผิดปกติเนื่องจากฉันใช้รหัสจากตัวอย่างที่อื่น

9
การเปลี่ยนค่า CSS ด้วย Javascript
ง่ายต่อการตั้งค่า CSS แบบอินไลน์ด้วยจาวาสคริปต์ หากฉันต้องการเปลี่ยนความกว้างและมี html ดังนี้: <div style="width: 10px"></div> สิ่งที่ฉันต้องทำคือ: document.getElementById('id').style.width = value; มันจะเปลี่ยนค่าสไตล์ชีตแบบอินไลน์ โดยปกตินี่ไม่ใช่ปัญหาเนื่องจากสไตล์อินไลน์จะแทนที่สไตล์ชีต ตัวอย่าง: <style> #tId { width: 50%; } </style> <div id="tId"></div> การใช้ Javascript นี้: document.getElementById('tId').style.width = "30%"; ฉันได้รับสิ่งต่อไปนี้: <style> #tId { width: 50%; } </style> <div id="tId" style="width: 30%";></div> นี่เป็นปัญหาเพราะไม่เพียง แต่ฉันไม่ต้องการเปลี่ยนค่าอินไลน์เท่านั้นหากฉันมองหาความกว้างก่อนที่จะตั้งค่าเมื่อฉันมี: <div id="tId"></div> ค่าที่ส่งคืนเป็น Null ดังนั้นหากฉันมี …
104 javascript  html  css  ajax  dom 

5
text-overflow: จุดไข่ปลาใน Firefox 4? (และ FF5)
text-overflow:ellipsis;คุณสมบัติ CSS ต้องเป็นหนึ่งในไม่กี่สิ่งที่ไมโครซอฟท์มีสิทธิทำเว็บ ตอนนี้เบราว์เซอร์อื่น ๆ ทั้งหมดรองรับ ... ยกเว้น Firefox นักพัฒนาไฟร์ฟอกซ์โต้เถียงกันมาตั้งแต่ปี 2548แต่ถึงแม้จะมีความต้องการที่ชัดเจน แต่ดูเหมือนว่าพวกเขาจะไม่สามารถนำตัวเองไปใช้งานได้จริง (แม้แต่การทดลอง-moz-ใช้งานก็เพียงพอแล้ว) ไม่กี่ปีที่ผ่านมาคนที่ทำงานออกวิธีการสับ Firefox 3 จะทำให้มันสนับสนุนจุดไข่ปลา แฮ็คใช้-moz-bindingคุณลักษณะนี้เพื่อใช้งานโดยใช้ XUL ขณะนี้มีไซต์จำนวนมากใช้แฮ็กนี้ ข่าวร้าย? Firefox 4 กำลังลบ-moz-bindingคุณลักษณะนี้ซึ่งหมายความว่าการแฮ็กนี้จะไม่ทำงานอีกต่อไป ดังนั้นทันทีที่ Firefox 4 เปิดตัว (ปลายเดือนนี้ฉันได้ยิน) เราจะกลับไปที่ปัญหาที่ไม่สามารถรองรับฟีเจอร์นี้ได้ คำถามของฉันคือ: มีวิธีอื่นในการแก้ปัญหานี้หรือไม่? (ฉันพยายามหลีกเลี่ยงการถอยกลับไปใช้โซลูชัน Javascript ถ้าเป็นไปได้) [แก้ไข] คะแนนโหวตมากมายเห็นได้ชัดว่าฉันไม่ใช่คนเดียวที่อยากรู้ แต่ตอนนี้ฉันมีคำตอบเดียวซึ่งโดยพื้นฐานแล้วพูดว่า 'ใช้จาวาสคริปต์' ฉันยังคงหวังว่าจะได้โซลูชันที่ไม่จำเป็นต้องใช้ JS เลยหรือที่แย่ที่สุดก็คือใช้เป็นแบ็คกราวด์ที่ฟีเจอร์ CSS ไม่ทำงาน ดังนั้นฉันจะโพสต์ความโปรดปรานให้กับคำถามหากมีใครบางคนพบคำตอบ [แก้ไข] การอัปเดต: Firefox เข้าสู่โหมดการพัฒนาอย่างรวดเร็ว แต่ถึงแม้ว่า …
104 firefox  ellipsis  css 

5
วิธีลบล้างซ้าย: 0 โดยใช้ CSS หรือ Jquery
ฉันมีองค์ประกอบซึ่งมี CSS ต่อไปนี้: .elem { left: 0; position: fixed; right: 0; width: 60%; z-index: 1000; } องค์ประกอบไม่ครอบคลุมทั้งหน้าจอ ฉันต้องการให้ "จัดตำแหน่ง" ทางด้านขวามือของหน้าจอ นี่จะเป็นเรื่องง่ายถ้าฉันลบleft: 0แต่ฉันไม่สามารถยุ่งกับ CSS ด้านบนได้ดังนั้นฉันจึงต้องการ CSS หรือ Jquery เพื่อแทนที่ปิดใช้งานหรือลบด้านซ้าย: 0 CSS ขอบคุณที่ช่วยเหลือ!
104 css  css-position 

4
การแสดง CSS: ความสูงต่ำสุดของตารางไม่ทำงาน
มีใครรู้บ้างว่าฉันสามารถทำให้ความสูงต่ำสุดใช้งานได้กับเบราว์เซอร์ล่าสุด ฉันใช้ตาราง CSS และดูเหมือนว่าจะไม่สนใจ min-height <div style="background-color: red; display: table; min-height: 100px;"> abc </div> ซอ
104 css 

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