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

วิธีที่ดีที่สุดในการเว้นวรรคแนวนอนปุ่ม Bootstrap คืออะไร? ในขณะที่ปุ่มสัมผัส: <div class="btn-group"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"> <i class="icon-in-button"></i> Add to list <span class="caret"/> </button> <ul class="dropdown-menu"> <li> <a href="#">here</a> </li> <li> <a href="#">new</a> </li> </ul> <button class="btn btn-info"> <i class="icon-in-button"></i> more </button> </div> jsfiddle แสดงปัญหา: http://jsfiddle.net/hhimanshu/sYLRq/4/

157 html  css  twitter-bootstrap 

ฉันพยายามใช้คุณสมบัติ Modal จาก Bootstrap 3 เพื่อแสดงวิดีโอ Youtube ของฉัน ใช้งานได้ แต่ฉันไม่สามารถคลิกที่ปุ่มใด ๆ ในวิดีโอ Youtube ความช่วยเหลือเกี่ยวกับเรื่องนี้? นี่คือรหัสของฉัน: <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script …

157 jquery  css  twitter-bootstrap  youtube  twitter-bootstrap-3 

ดังนั้นฉันเข้าใจวิธีการเปลี่ยนทั้ง CSS3 และภาพเคลื่อนไหว สิ่งที่ไม่ชัดเจนและฉัน googled คือเมื่อใดที่จะใช้ ตัวอย่างเช่นถ้าฉันต้องการตีกลับเป็นที่ชัดเจนว่าภาพเคลื่อนไหวเป็นวิธีที่จะไป ฉันสามารถให้คีย์เฟรมและเบราว์เซอร์จะทำเฟรมตัวกลางและฉันจะมีภาพเคลื่อนไหวที่ดี อย่างไรก็ตามมีบางกรณีที่สามารถใช้เอฟเฟกต์ดังกล่าวได้ทั้งสองวิธี ตัวอย่างที่ง่ายและทั่วไปจะใช้เมนูเลื่อนลิ้นชักสไตล์ Facebook: เอฟเฟกต์นี้สามารถทำได้โดยการเปลี่ยนผ่านดังนี้: .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ หรือผ่านภาพเคลื่อนไหวเช่นนั้น: .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes …

157 css  css-transitions  css-animations 

ฉันพบตัวอย่างนี้ใน stackoverflow: วาดวงกลมโดยใช้ CSS เพียงอย่างเดียว อันไหนดี แต่ฉันต้องการทราบวิธีแก้ไขตัวอย่างนั้นเพื่อให้ฉันสามารถรวมข้อความไว้ตรงกลางของวงกลมได้ ฉันยังพบสิ่งนี้: ข้อความตรงกลางและแนวนอนในวงกลมใน CSS (เช่นป้ายแจ้งเตือน iphone) แต่ด้วยเหตุผลบางอย่างมันไม่ทำงานสำหรับฉัน เมื่อฉันสร้างรหัสทดสอบต่อไปนี้: <div class="badge">1</div> แทนที่จะเป็นวงกลมฉันได้รูปวงรี ฉันพยายามที่จะเล่นกับรหัสเพื่อดูว่าฉันสามารถทำงานได้

156 css  css-shapes 

ฉันพยายามจำลองปุ่มใน Photoshop จำลองซึ่งมีเงาสองแบบ เงาแรกคือเงาภายในกล่องที่เบากว่า (2px) และเงาที่สองคือเงาที่อยู่ด้านนอกปุ่ม (5px) ใน Photoshop นี่ง่าย - Inner Shadow และ Drop Shadow ใน CSS ฉันเห็นได้ชัดว่ามีอย่างใดอย่างหนึ่ง แต่ไม่ใช่ทั้งสองอย่างในเวลาเดียวกัน หากคุณลองใช้รหัสด้านล่างในเบราว์เซอร์คุณจะเห็นว่ากล่องเงาแทนที่ทับกล่องเงา นี่คือเงากล่องสิ่งที่ใส่เข้าไป: box-shadow: inset 0 2px 0px #dcffa6; และนี่คือสิ่งที่ฉันต้องการสำหรับเงาที่ปุ่ม: box-shadow: 0 2px 5px #000; สำหรับบริบทนี่คือรหัสปุ่มเต็มของฉัน (พร้อมการไล่ระดับสีและทั้งหมด): button { outline: none; position: relative; width: 160px; height: 40px; font-family: 'Open Sans', sans-serif; …

156 css 

ฉันสงสัยว่ามันเป็นไปได้ที่จะใช้คลาส font-awesome (หรือแบบอักษร iconic อื่น ๆ ) เพื่อสร้าง<li>list-style-type แบบกำหนดเองหรือไม่? ฉันกำลังใช้ jQuery เพื่อทำสิ่งนี้เช่น: $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); อย่างไรก็ตามสิ่งนี้ไม่ได้มีรูปแบบที่เหมาะสมเมื่อ<li>ข้อความล้อมรอบหน้าเว็บเนื่องจากถือว่าไอคอนเป็นส่วนหนึ่งของข้อความไม่ใช่ตัวแสดงหัวข้อย่อยที่แท้จริง เคล็ดลับใด ๆ

156 css  html-lists  font-awesome 

Flexbox มีพฤติกรรมนี้ซึ่งทำให้รูปภาพมีความสูงตามธรรมชาติ กล่าวอีกนัยหนึ่งถ้าฉันมีคอนเทนเนอร์แบบเฟล็กบ็อกซ์พร้อมรูปลูกและฉันปรับขนาดความกว้างของภาพความสูงจะไม่ปรับขนาดเลยและภาพจะยืดออก div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล อะไรทำให้เกิดสิ่งนี้ ฉันเพิ่มCodePen นี้เพื่อแสดงว่าฉันหมายถึงอะไร

156 html  css  flexbox 

ความแตกต่างระหว่างposition: relativeและposition: absoluteใน CSS คืออะไร? และเมื่อใดที่คุณควรใช้อันไหน

155 css 

ฉันมีเมนูการนำทางแบบเลื่อนลงซึ่งบางส่วนของชื่อไม่ควรนำทางไปยังหน้าอื่นเมื่อคลิก (ชื่อเหล่านี้เปิดเมนูแบบเลื่อนลงเมื่อคลิก) ส่วนที่อื่น ๆ ควรนำทาง (สิ่งเหล่านี้ไม่มีรายการแบบเลื่อนลงและนำทางโดยตรง) ประเภทได้hrefกำหนดไว้ เพื่อแก้ปัญหานี้ฉันได้เพิ่ม CSS ต่อไปนี้สำหรับชื่อประเภทเดิม pointer-events: none; และใช้งานได้ดี แต่เนื่องจาก IE ไม่รองรับคุณสมบัตินี้ฉันกำลังมองหาการแก้ไข สิ่งที่น่ารำคาญคือฉันไม่มีสิทธิ์เข้าถึงและเปลี่ยนรหัส HTML และ JavaScriptอย่างสมบูรณ์ ความคิดใด ๆ

155 html  css  internet-explorer  browser  cross-browser 

ฉันใช้ -webkit-transform (และ -moz-transform / -o-transform) เพื่อหมุน div นอกจากนี้ยังมีการแก้ไขตำแหน่งเพิ่มเพื่อให้ div scrols ลงกับผู้ใช้ ใน Firefox มันใช้งานได้ดี แต่ในเบราว์เซอร์ที่ใช้ webkit จะใช้งานไม่ได้ หลังจากใช้ -webkit-transform ตำแหน่งที่แก้ไขไม่ทำงานอีกต่อไป! เป็นไปได้อย่างไร?

155 html  css  positioning  rotation 

โดยปกติแล้วไฟล์ css จะใส่เข้าไปด้านใน<head></head>ถ้าฉันใส่เข้าไปข้างใน<body></body>จะเกิดอะไรขึ้น?

155 html  css 

ฉันต้องการที่จะตั้งค่าtextarea's rowsและcolsแอตทริบิวต์ผ่านทาง CSS ฉันจะทำสิ่งนี้ใน CSS ได้อย่างไร

155 css  styling 

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

155 css  css-selectors 

ฉันต้องการกำหนดเป้าหมายแท็กทั้งหมดในหน้า ฉันรู้ว่าคุณสามารถทำได้ด้วยวิธีนี้ ... h1, h2, h3, h4, h5, h6 { font: 32px/42px trajan-pro-1,trajan-pro-2; } แต่มีวิธีที่มีประสิทธิภาพมากขึ้นในการทำเช่นนี้โดยใช้ตัวเลือก CSS ขั้นสูง? เช่นบางสิ่งเช่น: [att^=h] { font: 32px/42px trajan-pro-1,trajan-pro-2; } (แต่เห็นได้ชัดว่านี่ไม่ได้ผล)

155 css  css-selectors 

พยายามที่จะบรรลุพื้นหลังในหน้าเว็บที่ "แยกเป็นสอง"; มีสองสีที่อยู่ฝั่งตรงข้าม (ดูเหมือนจะทำได้โดยการตั้งค่าเริ่มต้นbackground-colorบนbodyแท็กจากนั้นใช้สีอื่นบนdivความกว้างของหน้าต่างทั้งหมด) ฉันคิดวิธีแก้ปัญหา แต่น่าเสียดายที่background-sizeคุณสมบัติไม่ทำงานใน IE7 / 8 ซึ่งเป็นสิ่งจำเป็นสำหรับโครงการนี้ - body { background: #fff; } #wrapper { background: url(1px.png) repeat-y; background-size: 50% auto; width: 100%; } เนื่องจากเป็นเพียงสีทึบอาจมีวิธีการใช้เฉพาะbackground-colorคุณสมบัติปกติหรือไม่

155 css  background-color