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

ฉันกำลังพยายามจัดรูปแบบองค์ประกอบที่วางโดยเต้าเสียบเราเตอร์ในเชิงมุมและต้องการให้แน่ใจว่าองค์ประกอบที่สร้างขึ้นมีความกว้าง 100% จากคำตอบส่วนใหญ่ฉันเห็นว่าฉันควรใช้::ng-deepตัวเลือก แต่จากเอกสารของ Angular มันกำลังถูกเลิกใช้ มีทางเลือกให้::ng-deepหรือไม่?

94 html  css  angular 

Bootstrap 4 มีตัวแบ่งแนวนอนในตัวหรือไม่? ฉันทำได้ <style type="text/css"> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> แต่ฉันต้องการใช้ bootstrap css ในตัวฉันไม่สามารถหาได้จากที่ใดในเอกสารบางทีฉันอาจพลาดไป

94 html  css  bootstrap-4  twitter-bootstrap-4 

ฉันมีมาร์กอัปต่อไปนี้: <div class="FixedHeightContainer"> <h2>Title</h2> <div class="Content"> ..blah blah blah... </div> </div> CSS มีลักษณะดังนี้: .FixedHeightContainer { float:right; height: 250px; width:250px; } .Content { ??? } เนื่องจากเนื้อหาของความสูงของโดยทั่วไปจะมีมากกว่าพื้นที่ที่จัดไว้ให้โดยdiv.Content div.FixedHeightContainerในขณะนี้div.Contentขยายออกไปจากด้านล่างอย่างสนุกสนานdiv.FixedHeightContainer- ไม่ใช่สิ่งที่ฉันต้องการ ฉันจะระบุdiv.Contentได้อย่างไรว่าได้รับแถบเลื่อน (ควรเป็นแนวตั้งเท่านั้น แต่ฉันไม่จุกจิก) เมื่อความสูงเกินกว่าที่จะใส่ได้ overflow:autoและไม่overflow:scrollได้ทำอะไรเลยด้วยเหตุผลที่แปลกประหลาด

94 css  scrollbar  overflow 

ฉันต้องปิดการใช้งานการเปลี่ยนสีของแท็กจุดยึดเมื่อเข้าชม ฉันทำอย่างนี้: a:visited{ color: gray } (ลิงก์เป็นสีเทาก่อนเข้าชม) แต่นี่เป็นวิธีที่ฉันระบุสีอย่างชัดเจนหลังจากเยี่ยมชมลิงก์ซึ่งเป็นการเปลี่ยนสีอีกครั้ง ฉันจะปิดใช้งานการเปลี่ยนสีของแท็กจุดยึดเมื่อเข้าชมโดยไม่เปลี่ยนสีอย่างชัดเจนได้อย่างไร

94 html  css  anchor 

ขณะนี้ฉันได้ใส่สิ่งนี้ไว้ในแท็กเนื้อหาเพื่อปิดใช้งานการเลือกข้อความ: body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } อย่างไรก็ตามตอนนี้ฉันinputและtextareaกล่องไม่สามารถเลือกได้ ฉันจะเลือกเฉพาะองค์ประกอบอินพุตเหล่านี้ได้อย่างไรและส่วนที่เหลือไม่สามารถเลือกได้?

94 css 

ฉันกำลังพยายามทำให้คุณสมบัติแอนิเมชั่น CSS ยังคงอยู่หลังจากทำเสร็จแล้วเป็นไปได้ไหม นี่คือสิ่งที่ฉันพยายามจะบรรลุ ... องค์ประกอบควรซ่อนอยู่เมื่อผู้ใช้เข้ามาที่หน้าหลังจาก 3 วินาที (หรืออะไรก็ได้) องค์ประกอบนั้นควรจะจางลงและเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์แล้วควรอยู่ที่นั่น นี่คือความพยายามในการเล่นซอ ... http://jsfiddle.net/GZx6F/ นี่คือรหัสสำหรับการเก็บรักษา ... <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> ฉันรู้วิธีการทำ jQuery .. มันจะเป็นแบบนี้ ... <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); …

94 css  css-animations 

ฉันมีองค์ประกอบ div นี้พร้อมภาพพื้นหลังและฉันต้องการหยุดไฮไลต์ในองค์ประกอบ div เมื่อดับเบิลคลิก มีคุณสมบัติ CSS สำหรับสิ่งนี้หรือไม่?

94 css  xhtml  tags  highlighting  double-click 

ฉันค้นหารอบ ๆ แล้วไม่พบสิ่งนี้ ฉันกำลังพยายามหาความกว้างของ div แต่ถ้ามีจุดทศนิยมมันจะปัดเศษตัวเลข ตัวอย่าง: #container{ background: blue; width: 543.5px; height: 20px; margin: 0; padding: 0; } ถ้าฉันทำ$('#container').width();มันจะส่งกลับ 543 แทนที่จะเป็น 543.5 ฉันจะไม่ปัดเศษตัวเลขและส่งคืนเต็ม 543.5 ได้อย่างไร

94 javascript  jquery  css 

ฉันใช้ Twitter Bootstrap 2.0.1 ในโปรเจ็กต์ Rails 3.1.2 ที่ใช้กับ bootstrap-sass ฉันกำลังโหลดทั้งไฟล์bootstrap.cssและbootstrap-responsive.cssไฟล์รวมถึงbootstrap-collapse.jsJavascript ผมมีรูปแบบของเหลวกับ navbar ที่คล้ายกับตัวอย่าง นี้ต่อไปนี้ navbar ว่า "รูปแบบการตอบสนอง" คำแนะนำที่นี่ ใช้งานได้ดี: หากหน้าเว็บแคบกว่าประมาณ 940px แถบนำทางจะยุบลงและแสดง "ปุ่ม" ที่ฉันสามารถคลิกเพื่อขยายได้ อย่างไรก็ตามแถบนำทางของฉันดูดีถึงความกว้างประมาณ 550px กล่าวคือไม่จำเป็นต้องยุบเว้นแต่หน้าจอจะแคบมาก ฉันจะบอกให้ Bootstrap ยุบเฉพาะแถบนำทางได้อย่างไรหากหน้าจอกว้างน้อยกว่า 550px โปรดทราบว่า ณ จุดนี้ฉันไม่ต้องการปรับเปลี่ยนพฤติกรรมตอบสนองอื่น ๆ เช่นการวางองค์ประกอบแบบซ้อนกันแทนที่จะแสดงแบบเคียงข้างกัน

94 css  ruby-on-rails-3  twitter-bootstrap 

หากฉันมีสิ่งต่อไปนี้ใน html ของฉัน: <div style="height:300px; width:300px; background-color:#ffffff;"></div> และสิ่งนี้ในสไตล์ชีต css ของฉัน: div { width:100px; height:100px; background-color:#000000; } มีวิธีใดบ้างที่ใช้ javascript / jquery เพื่อลบสไตล์อินไลน์ทั้งหมดและเหลือเฉพาะสไตล์ที่ระบุโดยสไตล์ชีต css

94 javascript  jquery  css  inline 

ฉันจะเลือกองค์ประกอบลิงก์ของผู้ปกครอง<ul>จากรายการเช่นนี้ได้อย่างไร <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ดังนั้นใน css ul li aแต่ไม่ใช่ul li ul li a ขอบคุณ

94 jquery  html  css  css-selectors 

ฉันรู้ว่าการจัดข้อความในแนวตั้งตรงกลางบล็อกคุณตั้งค่าความสูงของบรรทัดให้เท่ากับความสูงของบล็อก 2emแต่ถ้าผมมีประโยคด้วยคำที่อยู่ตรงกลางที่เป็น ถ้าทั้งประโยคมีความสูงบรรทัดเดียวกับบล็อกที่มีข้อความขนาดใหญ่จะถูกจัดแนวในแนวตั้ง แต่ข้อความที่เล็กกว่าจะอยู่บนเส้นฐานเดียวกันกับข้อความขนาดใหญ่ ฉันจะตั้งค่าให้ข้อความทั้งสองขนาดอยู่ในแนวตั้งได้อย่างไรดังนั้นข้อความที่ใหญ่กว่าจะอยู่บนเส้นฐานต่ำกว่าข้อความขนาดเล็ก

94 css  text  vertical-alignment  baseline 

ฉันมี div ที่ยุบได้ CSS บริสุทธิ์ซึ่งอ้างอิงจากรหัสของคนอื่นที่ใช้:targetpsuedoclass สิ่งที่ฉันกำลังพยายามตั้งค่าคือหน้าที่มีคำถามมากกว่า 12 ข้อและเมื่อคุณคลิกที่ปุ่ม + div คำตอบจะขยายออกด้านล่าง ฉันไม่สามารถหาวิธีสร้างองค์ประกอบ div ที่ยุบได้หลายรายการในหน้านี้โดยไม่ต้องเขียน CSS เพิ่มเติมมากมาย ใครมีคำแนะนำในการเขียนสิ่งนี้เพื่อย่อโค้ด CSS ของฉัน? (กล่าวคือฉันไม่ต้องป้อนตัวเลือกที่ไม่ซ้ำกันสำหรับคำถามมากกว่า 12 ข้อแต่ละข้อ) ฉันไม่สามารถใช้ Javascript ได้เนื่องจากสิ่งนี้เกิดขึ้นบนไซต์ wordpress.com ซึ่งไม่อนุญาตให้ใช้ JS นี่คือ jfiddle ของฉัน: http://jsfiddle.net/dmarvs/94ukA/4/ <div class="FAQ"> <a href="#hide1" class="hide" id="hide1">+</a> <a href="#show1" class="show" id="show1">-</a> <div class="question"> Question Question Question Question Question Question …

94 css  collapsable 

ฉันพยายามเพิ่มรหัสนี้ในองค์ประกอบ div ที่สร้างขึ้นแบบไดนามิก style = "width:330px;float:left;" รหัสที่สร้างไดนามิกdivคือ var nFilter = document.createElement('div'); nFilter.className = 'well'; nFilter.innerHTML = '<label>' + sSearchStr + '</label>'; ความคิดของฉันคือการเพิ่มสไตล์หลังจากนั้น< div class="well"แต่ฉันไม่รู้ว่าจะทำอย่างไร

94 javascript  css  innerhtml 

ในขณะที่คุณสามารถมองเห็นlist-itemsในครั้งแรกที่มีเหมือนกันrow heightแต่รายการในครั้งที่สองมีความแตกต่างกันrow ฉันต้องการทุกรายการจะมีเครื่องแบบheightsheight มีวิธีการเพื่อให้บรรลุนี้โดยไม่ให้การใด ๆคงที่สูงและเป็นเพียงการใช้flexbox ? นี่คือไฟล์ code .list { display: flex; flex-wrap: wrap; max-width: 500px; } .list-item { background-color: #ccc; display: flex; padding: 0.5em; width: 25%; margin-right: 1%; margin-bottom: 20px; } .list-content { width: 100%; } <ul class="list"> <li class="list-item"> <div class="list-content"> <h2>box 1</h2> <p>Lorem ipsum dolor sit amet, …

94 html  css  flexbox