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

นี่คือ CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } มันสร้างวงกลมด้านล่างได้อย่างไร สมมติว่าถ้าความกว้างของรูปสี่เหลี่ยมผืนผ้าเท่ากับ 180 พิกเซลและความสูงเป็น 180 พิกเซลก็จะปรากฏดังนี้: หลังจากใช้รัศมีเส้นขอบ 30 พิกเซลมันจะปรากฏดังนี้: สี่เหลี่ยมเล็กลงนั่นคือเกือบจะหายไปถ้าขนาดรัศมีเพิ่มขึ้น ดังนั้นเส้นขอบของพิกเซลที่ 180 ด้วยheight/width-> 0pxกลายเป็นวงกลมที่มีรัศมี 180 พิกเซลได้อย่างไร

206 html  css  css-shapes 

วิธีการเพิ่มstyle=display:"block"องค์ประกอบใน jQuery?

206 javascript  jquery  html  css 

ฉันรู้ว่าการตั้งค่าmargin: 0 auto;องค์ประกอบใช้เพื่อจัดกึ่งกลาง (ซ้าย - ขวา) อย่างไรก็ตามฉันรู้ว่าองค์ประกอบและผู้ปกครองต้องตรงตามเกณฑ์บางอย่างเพื่อให้ระยะขอบอัตโนมัติทำงานได้และฉันไม่สามารถทำให้ถูกต้องได้ ดังนั้นคำถามของฉันง่าย: คุณสมบัติ CSS ใดที่จะต้องมีการตั้งค่าในองค์ประกอบและผู้ปกครองของมันเพื่อmargin: 0 auto;ให้เด็กตรงกลางซ้ายขวา?

206 css 

ปัจจุบันเมื่อความกว้างของเบราว์เซอร์ลดลงต่ำกว่า 768px แถบนำทางจะเปลี่ยนเป็นโหมดยุบตัว ฉันต้องการเปลี่ยนความกว้างนี้เป็น 1,000px ดังนั้นเมื่อเบราว์เซอร์ต่ำกว่า 1,000px แถบนำทางจะเปลี่ยนเป็นโหมดยุบ ฉันต้องการทำสิ่งนี้โดยไม่ใช้ LESS ฉันใช้สไตลัสไม่ใช่ LESS ปัญหาของฉันเหมือนกับคำถามนี้: Bootstrap 3 Navbar ยุบ แต่คำตอบทั้งหมดในคำถามนั้นจะอธิบายวิธีการทำโดยการเปลี่ยนตัวแปร LESS ฉันไม่ได้ติดต่อกับน้อยฉันใช้สไตลัสดังนั้นฉันต้องการทราบว่าวิธีนี้สามารถทำได้โดยใช้สไตลัสหรือวิธีอื่น ขอบคุณ!

205 css  twitter-bootstrap  responsive-design  navbar  collapse 

สมมติว่าฉันมีสตริง " ฉันชอบก้นใหญ่และฉันนอนไม่หลับ " และฉันก็ตัดมันด้วยoverflow:hiddenดังนั้นมันจึงแสดงเป็นดังนี้: ฉันชอบก้นใหญ่และฉันไม่สามารถ ตัดข้อความ เป็นไปได้ไหมที่แสดงสิ่งนี้: ฉันชอบก้นใหญ่และฉันไม่สามารถ ... ใช้ CSS หรือไม่

205 html  css 

ฉันมีช่วงข้อมูลแบบไดนามิกในหน้าของฉันอย่างมีellipsisสไตล์ .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; ฉันต้องการเพิ่มคำแนะนำเครื่องมือองค์ประกอบนี้ด้วยเนื้อหาเดียวกัน แต่ฉันต้องการให้ปรากฏเฉพาะเมื่อเนื้อหามีความยาวและจุดไข่ปลาปรากฏบนหน้าจอ มีวิธีใดบ้างที่จะทำ? เบราว์เซอร์โยนเหตุการณ์เมื่อellipsisเปิดใช้งานหรือไม่ * เบราว์เซอร์: Internet Explorer

205 javascript  html  css  tooltip  ellipsis 

ฉันมี 2 divs เคียงข้างกันใน flexbox มือขวาควรมีความกว้างเท่ากันเสมอและฉันต้องการให้มือซ้ายจับที่เหลือ แต่จะไม่เว้นแต่ฉันจะตั้งค่าความกว้างเป็นพิเศษ ดังนั้นในขณะนี้มันถูกตั้งค่าเป็น 96% ซึ่งดูโอเคจนกระทั่งคุณสควอชหน้าจอจริงๆ - จากนั้น div มือขวาจะได้รับพื้นที่ที่ต้องการเล็กน้อย ฉันเดาว่าฉันจะทิ้งมันไว้อย่างที่มันเป็น แต่มันก็รู้สึกผิด - เหมือนจะต้องมีวิธีพูด: คนที่ใช่ก็เหมือนกันเสมอ คุณอยู่ทางซ้ายคุณจะได้ทุกอย่างที่เหลือ .ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; …

205 html  css  flexbox 

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

204 javascript  html  css  accessibility  simulation 

ฉันใช้เฟรมเวิร์ก bootstrap ของ twitter มาระยะหนึ่งแล้วพวกเขาก็อัพเดตเป็น version 3 เร็ว ๆ นี้! ฉันมีปัญหาในการติดท้ายท้ายกระดาษฉันใช้เทมเพลตเริ่มต้นที่จัดทำโดยเว็บไซต์ bootstrap twitter แต่ก็ยังไม่มีโชค

204 html  css  twitter-bootstrap  twitter-bootstrap-3 

ที่คุณสามารถดูใน CSS ดังต่อไปนี้ผมต้องการที่จะวางตำแหน่งตัวเองก่อนchild2 child1นี่เป็นเพราะเว็บไซต์ที่ฉันกำลังพัฒนาควรทำงานบนอุปกรณ์มือถือซึ่งchild2ควรจะอยู่ด้านล่างเนื่องจากมีการนำทางที่ฉันต้องการด้านล่างเนื้อหาบนอุปกรณ์มือถือ - ทำไมถึงไม่ใช่มาสเตอร์เพจ 2 เพจ นี่เป็นเพียง 2 รายการเท่านั้นdivsที่มีการจัดตำแหน่งใหม่ใน HTML ทั้งหมดดังนั้นมาสเตอร์เพจ 2 รายการสำหรับการเปลี่ยนแปลงเล็กน้อยนี้จึงเป็น overkill HTML: <div id="parent"> <div class="child1"></div> <div class="child2"></div> </div> CSS: parent { position: relative; width: 100%; } child1 { width: auto; margin-left: 160px; } child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; } …

204 html  css  position  master-pages  parent-child 

ฉันสร้างเมนูแนวนอนโดยใช้รายการ HTML และ CSS ทุกอย่างทำงานได้ตามปกติยกเว้นเมื่อคุณวางเมาส์เหนือลิงก์ คุณเห็นไหมว่าฉันได้สร้างสถานะโฮเวอร์ตัวหนาสำหรับลิงก์และตอนนี้ลิงก์เมนูเปลี่ยนเนื่องจากขนาดตัวหนาแตกต่างกัน ฉันพบปัญหาเดียวกันกับโพสต์ SitePointนี้ อย่างไรก็ตามโพสต์ไม่มีทางออกที่เหมาะสม ฉันค้นหาวิธีแก้ปัญหาทุกที่และหาไม่พบ แน่นอนฉันไม่สามารถเป็นคนเดียวที่พยายามทำสิ่งนี้ ไม่มีใครมีความคิดใด ๆ PS: ฉันไม่รู้ความกว้างของข้อความในรายการเมนูดังนั้นฉันไม่สามารถกำหนดความกว้างของรายการ li ได้ .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li a:visited { text-decoration: none; color: #000; margin-left: 8px; margin-right: …

204 html  css  hover  text-size 

ผมพยายามที่จะสไตล์fieldsetองค์ประกอบด้วยและdisplay: flexdisplay: inline-flex แต่ก็ไม่ได้ทำงาน: flexทำตัวเหมือนblockและทำตัวเหมือนinline-flexinline-block สิ่งนี้เกิดขึ้นทั้งบน Firefox และ Chrome แต่ใช้งานกับ IE ได้อย่างแปลกประหลาด มันเป็นข้อบกพร่องหรือไม่? ฉันไม่พบที่fieldsetควรมีพฤติกรรมพิเศษใด ๆ ทั้งในHTML5หรือในรายละเอียดCSS เค้าโครงกล่องแบบยืดหยุ่น fieldset, div { display: flex; border: 1px solid; } <fieldset> <p>foo</p> <p>bar</p> </fieldset> <div> <p>foo</p> <p>bar</p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

204 html  css  flexbox 

ฉันมีเว็บไซต์ที่เป็นหลักสำหรับผู้ใช้มือถือ แต่เดสก์ท็อปด้วย บน Mobile Safari การใช้<input type="number">งานได้ดีเพราะมันแสดงแป้นพิมพ์ตัวเลขในฟิลด์อินพุตซึ่งควรมีตัวเลขเท่านั้น อย่างไรก็ตามใน Chrome และ Safari การใช้อินพุตตัวเลขจะแสดงปุ่มหมุนที่ด้านขวาของฟิลด์ซึ่งดูเหมือนว่าไร้สาระในการออกแบบของฉัน ฉันไม่ต้องการปุ่มเพราะพวกมันไร้ประโยชน์เมื่อคุณต้องการเขียนตัวเลข 6 หลัก เป็นไปได้หรือไม่ที่จะปิดใช้งานสิ่งนี้ด้วย-webkit-appearanceหรือใช้ CSS เคล็ดลับอื่น ๆ ? ฉันได้ลองโดยไม่มีโชคมาก

203 css  html  webkit 

ฉันมีเว็บแอปพลิเคชันมือถือที่มีรายการที่ไม่ได้เรียงลำดับซึ่งมีหลายรายการที่มีไฮเปอร์ลิงก์ภายในแต่ละ li: ... คำถามของฉันคือฉันจะจัดรูปแบบไฮเปอร์ลิงก์ได้อย่างไรเพื่อที่จะไม่เปลี่ยนขนาดเมื่อดูบน iPhone และการเปลี่ยนจากแนวตั้ง -> เป็นแนวนอน? ตอนนี้ฉันมีขนาดตัวอักษรไฮเปอร์ลิงก์ที่ 14px แต่เมื่อเปลี่ยนเป็นแนวนอนมันจะขยายเป็น 20px ฉันต้องการให้ขนาดตัวอักษรคงเดิม นี่คือรหัส: ul li a { font-size:14px; text-decoration: none; color: #cc9999; } <ul> <li id="home" class="active"> <a href="home.html">HOME</a> </li> <li id="home" class="active"> <a href="test.html">TEST</a> </li> </ul> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

203 iphone  html  css 

เป็นไปได้หรือไม่ที่จะกำหนดสไตล์ CSS สำหรับองค์ประกอบที่จะใช้เฉพาะเมื่อองค์ประกอบที่ตรงกันมีองค์ประกอบเฉพาะ (เป็นรายการลูกโดยตรง) ฉันคิดว่านี่เป็นคำอธิบายที่ดีที่สุดโดยใช้ตัวอย่าง หมายเหตุ : ฉันกำลังพยายามจัดองค์ประกอบองค์ประกอบหลักขึ้นอยู่กับองค์ประกอบลูกที่มี <style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div …

203 html  css