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

ปิด คำถามนี้เป็นคำถามความคิดเห็นตาม ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบข้อเท็จจริงและการอ้างอิงได้โดยแก้ไขโพสต์นี้ ปิดเมื่อเดือนที่แล้ว ฉันกำลังออกแบบเว็บไซต์ใหม่และฉันต้องการให้มันเข้ากันได้กับเบราว์เซอร์และการตั้งค่าเบราว์เซอร์ให้ได้มากที่สุด ฉันกำลังพยายามตัดสินใจว่าควรใช้หน่วยการวัดแบบใดสำหรับขนาดของแบบอักษรและองค์ประกอบ แต่ไม่สามารถหาคำตอบสรุปได้ คำถามของฉันคือ: ฉันควรใช้pxหรือremใน CSS ของฉัน? จนถึงตอนนี้ฉันรู้ว่าการใช้pxไม่เข้ากันกับผู้ใช้ที่ปรับขนาดแบบอักษรพื้นฐานในเบราว์เซอร์ ฉันไม่สนใจemเพราะพวกเขามีความยุ่งยากในการรักษามากกว่าremพวกเขาเพราะน้ำตก บางคนบอกว่าrems มีความละเอียดอิสระและเป็นที่ต้องการมากกว่า แต่คนอื่นบอกว่าเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ซูมองค์ประกอบทั้งหมดอย่างเท่าเทียมกันอยู่แล้วดังนั้นการใช้pxไม่มีปัญหา ฉันถามสิ่งนี้เพราะมีความคิดเห็นที่แตกต่างกันมากมายเกี่ยวกับระยะทางที่เหมาะสมที่สุดใน CSS และฉันไม่แน่ใจว่าสิ่งใดดีที่สุด

375 html  css  distance  units-of-measurement 

เว็บไซต์ของฉันแสดงผลได้ดีบนเบราว์เซอร์ iPhone / Safari โดยมีข้อยกเว้นข้อเดียว: ช่องป้อนข้อความของฉันมีลักษณะที่โค้งมนแปลก ๆ ซึ่งดูไม่ดีเลยสำหรับส่วนที่เหลือของเว็บไซต์ของฉัน มีวิธีสอน Safari (ผ่าน CSS หรือข้อมูลเมตา) ไม่ให้ปัดเศษฟิลด์อินพุตและแสดงผลเป็นสี่เหลี่ยมตามที่ต้องการหรือไม่?

374 html  css  iphone  mobile-safari  css-reset 

ฉันมีลูกdivกับ: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> และฉันต้องการเค้าโครงต่อไปนี้: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | | |link-button | ------------------- ไม่ว่าจะมีข้อความมากแค่ไหนในpฉันต้องการที่จะติด.buttonที่ด้านล่างเสมอโดยไม่ทำให้มันไหลออกมา ฉันได้ยินมาว่าสิ่งนี้สามารถทำได้ด้วย Flexbox แต่ฉันไม่สามารถใช้งานได้

374 html  css  flexbox 

สิ่งที่ฉันพยายามทำคือการนับองค์ประกอบทั้งหมดในหน้าปัจจุบันด้วยคลาสเดียวกันจากนั้นฉันจะใช้มันเพื่อเพิ่มชื่อลงในแบบฟอร์มอินพุต โดยทั่วไปฉันอนุญาตให้ผู้ใช้คลิก<span>และจากนั้นโดยเพิ่มรายการอื่นสำหรับรายการประเภทเดียวกัน แต่ฉันไม่สามารถคิดวิธีที่จะนับสิ่งเหล่านี้ทั้งหมดด้วย jQuery / JavaScript ฉันจะตั้งชื่อรายการเป็นสิ่งที่ชอบname="whatever(total+1)"ถ้าใครมีวิธีที่ง่ายในการทำเช่นนี้ฉันจะขอบคุณอย่างยิ่งเพราะ JavaScript ไม่ได้เป็นภาษาพื้นเมืองของฉัน

373 javascript  jquery  css  element 

HTML <img src="logo.svg" alt="Logo" class="logo-img"> CSS .logo-img path { fill: #000; } svg โหลดด้านบนและเป็นค่าเริ่มต้นfill: #fffแต่เมื่อฉันใช้ด้านบนcssเพื่อลองเปลี่ยนเป็นสีดำจะไม่เปลี่ยนนี่เป็นครั้งแรกที่ฉันเล่นกับ SVG และฉันไม่แน่ใจว่าทำไมมันไม่ทำงาน

373 css  image  svg 

ฉันใช้ Bootstrap 3 เพื่อสร้างเค้าโครงตอบสนองที่ฉันต้องการปรับขนาดตัวอักษรไม่กี่ตามขนาดหน้าจอ ฉันจะใช้คิวรีสื่อเพื่อสร้างตรรกะชนิดนี้ได้อย่างไร

371 css  twitter-bootstrap  media-queries 

ฉันจะเลือกทั้งหมดยกเว้นลูกคนสุดท้ายที่ใช้ตัวเลือก CSS3 ได้อย่างไร div:nth-last-child(1)ยกตัวอย่างเช่นจะได้รับเพียงเด็กที่ผ่านมาจะเป็น

371 css-selectors  css 

ฉันจะกำหนดเป้าหมายฟิลด์อินพุตของประเภท 'ข้อความ' โดยใช้ตัวเลือก CSS ได้อย่างไร

371 html  css  forms  css-selectors  html-input 

อะไรคือความแตกต่างระหว่างmarginและpaddingใน CSS? มันดูเหมือนจะไม่ได้มีจุดประสงค์มาก คุณช่วยยกตัวอย่างความแตกต่างได้ไหม (และทำไมจึงเป็นเรื่องสำคัญที่จะต้องทราบความแตกต่าง)

371 css 

พิจารณารหัสต่อไปนี้ : #wrapper { width: 500px; border: 1px solid black; } #first { width: 300px; border: 1px solid red; } #second { border: 1px solid green; } <div id="wrapper"> <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div> <div id="second">When you post …

370 css  html 

ฉันไม่ต้องการรับค่าความทึบของเด็กจากพาเรนต์ใน CSS ฉันมีกองหนึ่งซึ่งเป็นพ่อแม่และฉันมีอีกกองหนึ่งในกองแรกซึ่งก็คือเด็ก ฉันต้องการตั้งค่าคุณสมบัติความทึบใน div parent แต่ฉันไม่ต้องการให้ div ลูกสืบทอดคุณสมบัติความทึบแสง ฉันจะทำสิ่งนั้นได้อย่างไร

370 css 

ฉันมีรายการองค์ประกอบซึ่งมีสไตล์ดังนี้: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; } <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เอาท์พุทOne | Two | Three | Four | Five |แทนOne | Two | Three | Four | Five ใครรู้วิธีการเลือก CSS ทั้งหมดยกเว้นองค์ประกอบสุดท้าย? คุณสามารถดูคำจำกัดความของ:not()ตัวเลือกได้ที่นี่

369 css  css-selectors  pseudo-element 

ความพยายามในการนำทาง flexbox ที่มีมากถึง 5 รายการและน้อยที่สุดเท่าที่ 3 แต่จะไม่แบ่งความกว้างเท่ากันระหว่างองค์ประกอบทั้งหมด ซอ บทช่วยสอนที่ฉันสร้างแบบจำลองนี้หลังจากนั้นคือhttp://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid 1px grey; margin: 0 0 0 6.5rem; display: table; table-layout: fixed; } .tabs ul { margin: 0; display: flex; flex-direction: row; } .tabs ul li …

368 html  css  flexbox 

ฉันไม่รู้ว่าทำไม CSS ง่าย ๆ นี้ไม่ทำงาน ... .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000; } <div class="app"> <a href="">Test Test Test Test Test Test</a> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ควรตัดรอบ "การทดสอบ" ครั้งที่ 4

368 overflow  ellipsis  css 

ใครสามารถแสดงให้ฉันเห็นความแตกต่างระหว่างalign-itemsและalign-content?

366 css  layout  flexbox  alignment