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

ใน CSS ฉันจะทำสิ่งนี้ได้อย่างไร: width: 100% - 100px; ฉันเดาว่ามันค่อนข้างง่าย แต่ก็ยากที่จะหาตัวอย่างที่แสดงว่า

153 html  css 

ใช้ Firefox CTRL +คุณสามารถขยายหน้าเว็บทั้งหมดโดยเพียงแค่กด สิ่งนี้จะขยายขนาดหน้าเว็บทั้งหมด (แบบอักษรรูปภาพและอื่น ๆ ) ตามสัดส่วน ฉันจะทำซ้ำฟังก์ชั่นเดียวกันโดยใช้ CSS ได้อย่างไร มีสิ่งที่ชอบpage-size: 150%(ซึ่งจะเพิ่มส่วนหน้าทั้งหมดโดย x%?)

153 html  css  resize 

TL; DR:มีอะไรที่เหมือนกับtable-layout: fixedCSS กริดหรือไม่ ฉันพยายามสร้างปฏิทินมุมมองรายปีด้วยตารางขนาดใหญ่ 4x3 ตารางในเดือนนั้นและซ้อนกัน 7x6 กริดสำหรับวันนั้น ปฏิทินควรเติมหน้าดังนั้นคอนเทนเนอร์กริดของปีจะได้รับความกว้างและความสูง 100% ต่อรายการ .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } นี่คือตัวอย่างการทำงาน: https://codepen.io/loilo/full/ryXLpO/ เพื่อความเรียบง่ายปากกาทุกเดือนมี 31 วันและเริ่มในวันจันทร์ ฉันยังเลือกขนาดตัวอักษรที่เล็กเพื่อแสดงให้เห็นถึงปัญหา: รายการกริด (= เซลล์วัน) จะค่อนข้างข้นเนื่องจากมีหลายร้อยรายการในหน้า และทันทีที่ป้ายหมายเลขวันมีขนาดใหญ่เกินไป (อย่าลังเลที่จะเล่นด้วยขนาดตัวอักษรในปากกาโดยใช้ปุ่มที่ด้านซ้ายบน) …

153 css  grid-layout  css-grid 

วิธีที่ง่ายที่สุดในการตรวจสอบว่าองค์ประกอบได้รับการล้น? กรณีการใช้งานของฉันคือฉันต้องการ จำกัด กล่องเนื้อหาบางอย่างให้มีความสูง 300px หากเนื้อหาภายในสูงกว่านั้นฉันจะตัดมันด้วยการล้น แต่ถ้ามันล้นฉันต้องการแสดงปุ่ม 'มากกว่า' แต่ถ้าไม่ใช่ฉันไม่ต้องการแสดงปุ่มนั้น มีวิธีง่าย ๆ ในการตรวจจับการล้นหรือมีวิธีการที่ดีกว่า

153 javascript  css  overflow 

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

152 javascript  html  css 

มีวิธีการป้องกันไม่ให้ผู้ใช้เห็นผีของภาพที่พวกเขากำลังพยายามลาก (ไม่ต้องกังวลเกี่ยวกับความปลอดภัยของภาพ แต่เป็นประสบการณ์) ฉันได้ลองวิธีนี้แล้วซึ่งแก้ไขปัญหาด้วยการเลือกสีน้ำเงินในข้อความและรูปภาพ แต่ไม่ใช่ภาพผี: img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } (ฉันพยายามทำรังภาพภายใน div ด้วยกฎเดียวกันกับที่ใช้กับ div) ขอบคุณ

152 javascript  html  css 

ฉันใช้การจัดเรียงข้อความสไตล์ CSS เพื่อจัดเนื้อหาภายในคอนเทนเนอร์ใน HTML สิ่งนี้ใช้ได้ดีในขณะที่เนื้อหาเป็นข้อความหรือเบราว์เซอร์คือ IE แต่อย่างอื่นมันไม่ทำงาน เช่นเดียวกับชื่อที่แสดงว่ามันถูกใช้โดยทั่วไปเพื่อจัดแนวข้อความ คุณสมบัติการจัดตำแหน่งได้รับการปฏิเสธกลับมานาน มีวิธีอื่นในการจัดแนวเนื้อหาใน html หรือไม่

152 html  css  text-align 

ฉันต้องการเพิกเฉยต่อ:hoverการประกาศ CSS ทั้งหมดหากผู้ใช้เยี่ยมชมเว็บไซต์ของเราผ่านอุปกรณ์สัมผัส เนื่องจาก:hoverCSS ไม่สมเหตุสมผลและยังอาจรบกวนได้หากแท็บเล็ตทริกเกอร์เมื่อคลิก / แตะเพราะอาจติดค้างจนองค์ประกอบสูญเสียโฟกัส พูดตามตรงฉันไม่รู้ว่าทำไมอุปกรณ์ระบบสัมผัสจึงรู้สึกว่าจำเป็นต้องกระตุ้น:hoverตั้งแต่แรก - แต่นี่คือความจริงดังนั้นปัญหานี้ก็เป็นความจริงเช่นกัน a:hover { color:blue; border-color:green; // etc. > ignore all at once for touch devices } ดังนั้น (วิธี) ฉันจะลบ / เพิกเฉยต่อ:hoverการประกาศCSS ทั้งหมดในครั้งเดียว (โดยไม่ต้องรู้แต่ละรายการ) สำหรับอุปกรณ์สัมผัสหลังจากที่มีการประกาศ

152 html  css  hover  touch 

ฉันกำลังทำงานกับการวางสไตล์ชีทของเหลวและมันก็ใช้งานได้ดีมาก สิ่งหนึ่งที่ฉันสังเกตเห็นคือหน้าต่างเบราว์เซอร์ของฉันใน Chrome จะไม่ปรับขนาดต่ำกว่า 400px มันเพิ่งติดที่นั่นและใน FF เมื่อฉันลดขนาดมันจะหยุดที่ประมาณ 400px จากนั้นก็ปรากฏแถบเลื่อนแนวนอน เมื่อฉันเปิดไซต์บนโทรศัพท์ของฉันมันดูสมบูรณ์แบบประมาณ 320px ดังนั้นฉันจึงรู้ว่ามันมีขนาดต่ำกว่า 400px ฉันอยากรู้ว่าถ้าใครรู้ว่านี่เป็นสิ่งที่เบราว์เซอร์ / เดสก์ท็อปหรือถ้าฉันจะดูอย่างอื่นที่ไม่ใช่ CSS ของฉัน ฉันไม่มีการประกาศความกว้างขั้นต่ำดังนั้นฉันไม่แน่ใจว่าจะเกิดอะไรขึ้น อีกครั้งบนเดสก์ท็อปมันลดขนาดลงเหลือความกว้างต่ำสุดประมาณ 400px และหยุดลง แต่เมื่อฉันเปิดมันขึ้นมาบนโทรศัพท์ของฉันมันก็จะปรับขนาดตามขนาดของหน้าจอโทรศัพท์ซึ่งประมาณ 320px ... สงสัยว่าทำไมอย่างน้อยที่สุด ไม่ลดลงถึง 320px บนเดสก์ท็อป -edit- นอกจากนี้ฉันไม่แน่ใจว่าเรื่องนี้หรือไม่ แต่ Opera อนุญาตให้ลดขนาดลงจนแทบไม่มีอะไรเลย ... ดังนั้นจึงใช้งานได้กับ Opera และไม่ใช่ Chrome หรือ FF ... แนวคิดใด ๆ

151 html  css  layout  liquid-layout 

ท่ามกลางข้อความและภาพอื่น ๆ ที่เป็นโรคเอดส์ในการส่งแบบฟอร์มการตรวจสอบภายหลังฉันกำลังระบายสีกล่องอินพุตของฉันเป็นสีแดงเพื่อบ่งบอกถึงพื้นที่โต้ตอบที่ต้องการความสนใจ บน Chrome (และสำหรับผู้ใช้แถบเครื่องมือ Google) คุณสมบัติเติมอัตโนมัติจะเปลี่ยนสีรูปแบบการป้อนของฉันเป็นสีเหลือง นี่คือปัญหาที่ซับซ้อน: ฉันต้องการให้สมบูรณ์แบบอัตโนมัติอนุญาตในแบบฟอร์มของฉันมันความเร็วผู้ใช้เข้าสู่ระบบฉันจะตรวจสอบความสามารถในการเปิดคุณลักษณะการเติมข้อความอัตโนมัติให้ปิดถ้า / เมื่อมีข้อผิดพลาดทริกเกอร์ แต่มันซับซ้อน บิตของการเข้ารหัสเพื่อปิดโดยอัตโนมัติทางโปรแกรมสำหรับการป้อนข้อมูลที่ได้รับผลกระทบเดียวในหน้า นี่มันง่ายมากที่จะปวดหัว ดังนั้นเพื่อพยายามหลีกเลี่ยงปัญหานั้นมีวิธีใดที่ง่ายกว่าในการหยุด Chrome จากการเปลี่ยนสีกล่องอินพุตอีกครั้งหรือไม่ [แก้ไข] ฉันลองใช้! ข้อเสนอแนะที่สำคัญด้านล่างและไม่มีผลใด ๆ ฉันยังไม่ได้ตรวจสอบ Google Toolbar เพื่อดูว่าคุณลักษณะ! สำคัญจะใช้งานได้หรือไม่ เท่าที่ฉันสามารถบอกได้ไม่มีวิธีอื่นใดนอกเหนือจากการใช้แอตทริบิวต์การเติมข้อความอัตโนมัติ (ซึ่งดูเหมือนจะใช้งานได้)

151 css  validation  google-chrome  html-input 

ฉันมีปัญหาในการทำให้เสียงดังปัง (select2 + angulat-ui) ทำงานได้ http://plnkr.co/edit/NkdWUO?p=preview ในการตั้งค่าท้องถิ่นฉันได้งาน select2 แต่ฉันไม่สามารถกำหนดความกว้างตามที่อธิบายไว้ใน เอกสาร มันแคบเกินไปที่จะใช้ ขอบคุณ. แก้ไข: ไม่เป็นไรหรอกนะว่าฉันได้พบคนทำหมันทำงานอยู่ที่นี่ http://jsfiddle.net/pEFy6/ ดูเหมือนว่าเป็นพฤติกรรมของ select2 ที่จะยุบไปตามความกว้างขององค์ประกอบแรก ฉันสามารถตั้งค่าความกว้างผ่าน bootstrap class="input-medium"ยังไม่แน่ใจว่าทำไม angular-ui ไม่ใช้พารามิเตอร์ config

151 css  twitter-bootstrap  angularjs  jquery-select2 

ฉันต้องการที่จะใช้เมนูแบบเลื่อนลง twitter bootstrap นี่คือรหัสของฉัน: <span class="dropdown"> <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li class="divider"></li> <li><a href="#">d</a></li> </ul> ดร็อปดาวน์ใช้งานได้ดีดรอปดาวน์ของฉันจะอยู่ติดกับขอบด้านขวาของหน้าจอและเมื่อฉันคลิกสลับดรอปดาวน์รายการจะอยู่นอกหน้าจอ ดูเหมือนว่าบนหน้าจอ: ฉันจะแก้ไขได้อย่างไร

151 html  css  twitter-bootstrap 

ฉันมี HTML ต่อไปนี้: <div class="title"> <span>Cumulative performance</span> <span>20/02/2011</span> </div> ด้วย CSS นี้: .title { display: block; border-top: 4px solid #a7a59b; background-color: #f6e9d9; height: 22px; line-height: 22px; padding: 4px 6px; font-size: 14px; color: #000; margin-bottom: 13px; clear:both; } หากคุณตรวจสอบ jsFiddle นี้: http://jsfiddle.net/8JwhZ/ คุณจะเห็นว่าชื่อและวันที่ติดกัน มีวิธีที่ฉันจะได้รับวันที่เพื่อจัดชิดขวา? ฉันลองfloat: right;ครั้งที่สอง<span>แต่มันทำให้สไตล์แย่ลงและผลักวันที่ออกจาก div ที่ปิดล้อม

151 html  css 

ฉันกำลังแก้ไขไฟล์. css ภายใน Visual Studio 2012 (ในโหมดแก้ไขข้อบกพร่อง) ฉันใช้ Chrome เป็นเบราว์เซอร์ของฉัน เมื่อฉันทำการเปลี่ยนแปลงไฟล์. css ของแอปพลิเคชันภายใน Visual Studio และบันทึกการรีเฟรชหน้าจะไม่โหลดเมื่อมีการเปลี่ยนแปลงที่อัปเดตในไฟล์. css ของฉัน ฉันคิดว่าไฟล์. css ยังคงถูกแคชอยู่ ฉันเหนื่อย: CTRL / F5 ใน Visual Studio 2012 ไปที่คุณสมบัติโครงการแท็บเว็บเลือกเริ่มโปรแกรมภายนอกในส่วนเริ่มการทำงานวางหรือเรียกดูเส้นทางสำหรับ Google Chrome (เหมืองคือ C: \ Users \ xxx \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe) …

151 css  visual-studio  google-chrome  caching 

ฉันมี div นี้: <div style='overflow:scroll; width:400px;height:400px;'>here is some text</div> แถบเลื่อนสามารถมองเห็นได้เสมอถึงแม้ว่าข้อความจะไม่ล้น ฉันต้องการให้แถบเลื่อนปรากฏเฉพาะเมื่อจำเป็นเท่านั้นนั่นคือจะปรากฏเฉพาะเมื่อมีข้อความในกล่องที่จำเป็นเท่านั้น เช่นเดียวกับ textarea ฉันจะทำสิ่งนี้ได้อย่างไร หรือเป็นตัวเลือกเดียวของฉันในการกำหนดลักษณะ textarea ดังนั้นจึงดูเหมือนเป็น div หรือไม่

151 css  html  scrollbar