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

อะไรคือวิธีที่ดีที่สุดในการสร้างองค์ประกอบที่มีความสูงขั้นต่ำ 100% ในเบราว์เซอร์ที่หลากหลาย โดยเฉพาะอย่างยิ่งถ้าคุณมีรูปแบบที่มีheaderและfooterคงที่height, คุณจะทำให้ส่วนที่เป็นสื่อกลางเติมเต็ม100%พื้นที่ในระหว่างที่มีการfooterแก้ไขไปที่ด้านล่างได้อย่างไร

164 html  css  xhtml 

เป็นไปได้<input type="file">หรือไม่ที่จะเปลี่ยนรูปลักษณ์ของ?

164 html  css  file-upload  input 

ฉันต้องการใช้แบบอักษร Roboto ของ Google บนเว็บไซต์ของฉันและฉันกำลังติดตามบทช่วยสอนนี้: http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15 ฉันได้ดาวน์โหลดไฟล์ที่มีโครงสร้างโฟลเดอร์ดังนี้: ตอนนี้ฉันมีสามคำถาม: ฉันมี CSS ในmedia/css/main.cssURL ของฉัน ดังนั้นฉันต้องวางโฟลเดอร์นั้นไว้ที่ไหน? ฉันต้องแยก eot, svg ทั้งหมดออกจากโฟลเดอร์ย่อยทั้งหมดและใส่ในfontsโฟลเดอร์หรือไม่? ฉันจำเป็นต้องสร้างไฟล์ css fonts.css และรวมไว้ในไฟล์เทมเพลตฐานของฉันหรือไม่? ตัวอย่างที่เขาใช้นี้ @font-face { font-family: 'Roboto'; src: url('Roboto-ThinItalic-webfont.eot'); src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-ThinItalic-webfont.woff') format('woff'), url('Roboto-ThinItalic-webfont.ttf') format('truetype'), url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). font-weight: 200; font-style: italic; } URL ของฉันควรเป็นอย่างไรหากฉันต้องการมีโครงสร้าง dir …

164 html  css  fonts 

ฉันได้แยกกรณีทดสอบเล็กน้อยเกี่ยวกับz-indexข้อบกพร่องของ IE7 แต่ไม่ทราบวิธีแก้ไข ฉันเล่นมาz-indexทั้งวัน มีอะไรผิดปกติกับz-indexใน IE7 ทดสอบ CSS: input { border: 1px solid #000; } div { border: 1px solid #00f; } ul { border: 1px solid #f00; background-color: #f00; list-style-type: none; margin: 0; padding-left: 0; z-index: 1000; } li { color: #fff; list-style-type: none; padding-left: 0; margin-left: 0; } …

163 css  internet-explorer-7  z-index 

ฉันได้อ่านบางที่<img>องค์ประกอบนั้นทำงานเหมือนทั้งสอง ถ้าถูกต้องมีใครช่วยอธิบายด้วยตัวอย่างได้ไหม

163 html  css  image 

ใช้ jQuery ฉันต้องการปิดการเลื่อนร่างกาย: ความคิดของฉันคือ: ชุด body{ overflow: hidden;} จับภาพปัจจุบัน scrollTop();/scrollLeft() เชื่อมโยงกับเหตุการณ์การเลื่อนร่างกายตั้ง scrollTop / scrollLeft เป็นค่าที่บันทึกไว้ มีวิธีที่ดีกว่า? ปรับปรุง: โปรดดูตัวอย่างของฉันและเหตุผลที่http://jsbin.com/ikuma4/2/edit ฉันรู้ว่ามีใครบางคนกำลังคิดว่า "ทำไมเขาไม่ใช้เพียงแค่position: fixedบนแผงควบคุม" โปรดอย่าแนะนำสิ่งนี้เพราะฉันมีเหตุผลอื่น

163 jquery  css  scroll 

กำลังพยายามเปิดกล่องอัพโหลด (ปุ่มเรียกดู) โดยใช้ jQuery วิธีที่ฉันลองตอนนี้คือ: $('#fileinput').trigger('click'); แต่ดูเหมือนจะไม่ทำงาน กรุณาช่วย. ขอบคุณ.

163 javascript  jquery  css 

ฉันเคยเห็นคำถามนี้และgoogled เล็กน้อยแต่ไม่มีอะไรได้ทำงาน ฉันคิดว่าเป็นปี 2010 แล้ว (คำถาม / คำตอบเหล่านั้นเก่าและยังไม่ได้ตอบ) และเรามี CSS3! มีวิธีใดที่จะให้ div เติมทั้งความกว้างและความสูงของเซลล์ตารางทั้งหมดโดยใช้ CSS? ฉันไม่รู้ว่าความกว้างและ / หรือความสูงของเซลล์จะเป็นอย่างไรก่อนเวลาและการตั้งค่าความกว้างและความสูงของ div ให้เป็น 100% ไม่ทำงาน นอกจากนี้เหตุผลที่ฉันต้องการ div คือเพราะฉันต้องการวางองค์ประกอบบางอย่างนอกเซลล์อย่างแน่นอนและposition: relativeไม่ได้ใช้กับtds ดังนั้นฉันจึงต้องการ div wrapper

163 css 

ฉันมีหน้าเว็บที่มีแบบฟอร์มเท่านั้นและฉันต้องการให้แบบฟอร์มอยู่ตรงกลางของหน้าจอ <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> การjustify-content-centerจัดแนวแบบฟอร์มในแนวนอน แต่ฉันไม่สามารถหาวิธีจัดแนวตั้งได้ ฉันได้พยายามที่จะใช้align-items-centerและalign-self-centerแต่มันไม่ทำงาน ฉันพลาดอะไรไป การสาธิต

163 css  twitter-bootstrap  bootstrap-4  centering 

พฤติกรรมเริ่มต้นของ WebKit / Blink (Safari / Chrome) บน MacOS ตั้งแต่ 10.7 (Mac OS X Lion) คือการซ่อนแถบเลื่อนจากผู้ใช้ trackpad เมื่อไม่ได้ใช้งาน นี้อาจจะทำให้เกิดความสับสน ; แถบเลื่อนมักเป็นเพียงคิวภาพที่องค์ประกอบเลื่อนได้ ตัวอย่าง ( jsfiddle ) HTML <div class="frame"> Foo<br /> Bar<br /> Baz<br /> Help I'm trapped in an HTML factory! </div> CSS .frame { overflow-y: auto; border: 1px solid …

162 css  macos  webkit  scrollbar  blink 

ฉันได้สร้างสิ่งต่อไปนี้ ... var menu = document.createElement('select'); ตอนนี้ฉันจะตั้งค่าคุณสมบัติ CSS ได้width: 100pxอย่างไร

162 javascript  css 

ลองนึกภาพเลย์เอาต์ต่อไปนี้โดยที่จุดแสดงถึงช่องว่างระหว่างกล่อง [Left box]......[Center box]......[Right box] เมื่อฉันลบกล่องขวาฉันชอบกล่องตรงกลางที่จะยังคงอยู่ในศูนย์เช่น: [Left box]......[Center box]................. สิ่งเดียวกันจะเกิดขึ้นหากฉันจะลบกล่องด้านซ้าย ................[Center box]................. ตอนนี้เมื่อเนื้อหาภายในกล่องกลางยาวขึ้นมันจะใช้พื้นที่มากเท่าที่จำเป็นในขณะที่เหลืออยู่กึ่งกลาง กล่องด้านซ้ายและขวาจะไม่ย่อขนาดดังนั้นเมื่อไม่มีที่ว่างเหลืออยู่overflow:hiddenและtext-overflow: ellipsisจะมีผลในการทำลายเนื้อหา [Left box][Center boxxxxxxxxxxxxx][Right box] ทั้งหมดข้างต้นเป็นสถานการณ์ในอุดมคติของฉัน แต่ฉันไม่รู้ว่าจะทำสิ่งนี้ได้อย่างไร เพราะเมื่อฉันสร้างโครงสร้างแบบยืดหยุ่นเช่นนั้น: .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } ถ้ากล่องซ้ายและขวามีขนาดเท่ากันฉันจะได้เอฟเฟกต์ที่ต้องการ อย่างไรก็ตามเมื่อหนึ่งในสองนั้นมาจากขนาดที่แตกต่างกันกล่องที่อยู่ตรงกลางไม่ได้อยู่กึ่งกลางอีกต่อไปอย่างแท้จริง มีใครบ้างที่สามารถช่วยฉันได้บ้าง ปรับปรุง A justify-selfจะดีนี่จะเหมาะ: .leftBox …

162 html  css  flexbox  centering 

ดูเหมือนว่าการซ้อนทับของ Apple เป็นมากกว่าความโปร่งใส มีความคิดเห็นเกี่ยวกับวิธีการบรรลุผลนี้ด้วย CSS และอาจเป็นไปได้ JS?

161 javascript  css  user-interface  blur 

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันได้ค้นพบFlexboxเมื่อเร็ว ๆ นี้เมื่อฉันกำลังมองหาวิธีแก้ปัญหาเพื่อให้ div สูงเหมือนกันขึ้นอยู่กับระดับสูงสุด ฉันได้อ่านหน้าต่อไปนี้บน CSS-tricks.com และเชื่อฉันว่าflexboxเป็นโมดูลที่ทรงพลังมากในการเรียนรู้และใช้งาน อย่างไรก็ตามมันทำให้ฉันคิดถึงความจริงที่ว่า Twitter Bootstrap (และเฟรมเวิร์กที่คล้ายกัน) เสนอฟังก์ชั่นแบบเดียวกัน (+ แน่นอนมากขึ้นเป็นพิเศษ) ด้วยระบบกริด ตอนนี้คำถามคืออะไรข้อดีและข้อเสียของflexboxคืออะไร? มีบางอย่างที่เราไม่สามารถทำได้กับ Flexbox ที่เราสามารถทำกับเฟรมเวิร์กอย่าง Bootstrap (แน่นอนว่าเป็นการพูดถึงระบบกริด) ตัวเลือกใดที่เร็วกว่าเมื่อติดตั้งบนเว็บไซต์ ฉันเดาว่าสำหรับระบบกริดเท่านั้นมันฉลาดกว่าที่จะใช้อย่างหมดจดflexboxแต่ถ้าคุณใช้เฟรมเวิร์กอยู่แล้วจะมีอะไรflexboxเพิ่มบ้างไหม? มีเหตุผลใดบ้างที่จะเลือกflexbox"ระบบกริด" บนกรอบของ?

161 html  css  twitter-bootstrap  flexbox 

ฉันกำลังมองหาตัวเลือก css ที่ให้ฉันเลือกรายการย่อยก่อนหน้าของรายการ <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <!-- select the pre last item dynamically no matter how long this list is --> <li>6</li> </ul> วิธีการคงที่: ul li:nth-child(5) วิธีการแบบไดนามิก: ul li:last-child(-1) ซึ่งแน่นอนว่าไม่ได้ตรวจสอบได้เช่นกัน nth-last-child ดูเหมือนจะไม่ได้ให้วิธีแบบไดนามิก .. ฉันสามารถย้อนกลับไปที่จาวาสคริปต์ แต่ฉันสงสัยว่ามีวิธี CSS ที่ฉันมองข้าม

161 css  css-selectors