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

ฉันกำลังทำงานกับโครงร่าง flexbox ที่ซ้อนกันซึ่งควรทำงานดังนี้: ระดับนอกสุด ( ul#main) เป็นรายการแนวนอนที่ต้องขยายไปทางขวาเมื่อมีการเพิ่มรายการเข้าไปในรายการเพิ่มเติม ถ้ามันใหญ่เกินไปมันควรจะมีแถบเลื่อนแนวนอน #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } แต่ละรายการในรายการนี้ ( ul#main > li) มีส่วนหัว ( ul#main > li > h2) และรายการภายใน ( ul#main > li > ul.tasks) รายการด้านในนี้เป็นแนวตั้งและควรตัดเข้าไปในคอลัมน์เมื่อจำเป็น เมื่อตัดเป็นคอลัมน์เพิ่มเติมความกว้างควรเพิ่มเพื่อให้มีที่ว่างสำหรับรายการเพิ่มเติม การเพิ่มความกว้างนี้ควรใช้กับรายการที่มีของรายการด้านนอกด้วย .tasks { flex-direction: column; flex-wrap: …

168 html  css  flexbox 

Наэтотвопросестьответына กองมากเกินнарусском : Использованиеизображениявместорадио-кнопки หากฉันมีกลุ่มวิทยุพร้อมปุ่ม: ... ฉันจะแสดงเฉพาะภาพในตัวเลือกที่เลือกแทนปุ่มได้อย่างไร

167 html  css 

ผมพบว่าวิธีที่จะทำให้ภาชนะ div min-height: 100%;ที่จะครอบครองอย่างน้อยเต็มความสูงของหน้าเว็บโดยการตั้งค่า อย่างไรก็ตามเมื่อฉันเพิ่ม div ที่ซ้อนกันและตั้งค่าheight: 100%;มันจะไม่ยืดความสูงของคอนเทนเนอร์ มีวิธีแก้ไขหรือไม่ html, body { height: 100%; margin: 0; } #containment { min-height: 100%; background: pink; } #containment-shadow-left { height: 100%; background: aqua; } <div id="containment"> <div id="containment-shadow-left"> Hello World! </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

167 css  html 

มีวิธีในการแสดง html เป็นภาพเช่น PNG หรือไม่? ฉันรู้ว่ามันเป็นไปได้กับผืนผ้าใบ แต่ฉันต้องการที่จะแสดงองค์ประกอบ html มาตรฐานเช่น div เช่น

167 javascript  html  css  image  render 

ฉันต้องการที่จะมีA BและCจัดให้อยู่ตรงกลาง ฉันจะได้รับDที่จะไปอย่างสมบูรณ์เพื่อที่เหมาะสมหรือไม่ ก่อน: หลังจาก: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> เรียกใช้ข้อมูลโค้ดHide …

167 html  css  flexbox 

ฉันอยู่ระหว่างการสร้างแอพ Rails เดี่ยวครั้งแรกของฉันโดยใช้ Rails 3.1.rc5 ปัญหาของฉันคือฉันต้องการให้เว็บไซต์ของฉันแสดงไฟล์ CSS ต่างๆตามเงื่อนไข ฉันใช้ Blueprint CSS และฉันพยายามให้เฟือง / รางแสดงผลscreen.cssเกือบตลอดเวลาprint.cssเฉพาะเมื่อพิมพ์และie.cssเมื่อเข้าถึงไซต์จาก Internet Explorer เท่านั้น น่าเสียดายที่*= require_treeคำสั่งเริ่มต้นในapplication.cssรายการรวมทุกอย่างในassets/stylesheetsไดเรกทอรีและทำให้เกิดความสับสน CSS วิธีแก้ปัญหาปัจจุบันของฉันเป็นวิธีการบังคับแบบ brute-force ซึ่งฉันระบุทุกอย่างเป็นรายบุคคล: ใน application.css: *= require_self *= require home.css ... *= require blueprint/screen.css ในสไตล์ชีตของฉันบางส่วน (haml): <!--[if lt IE 9] <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ![endif]--> = stylesheet_link_tag "application" = stylesheet_link_tag 'blueprint/print', media: …

166 css  ruby-on-rails-3.1  asset-pipeline  sprockets 

ฉันต้องการเริ่มใช้เข็มทิศและเขื่องเพื่อเร่งการพัฒนา ในตอนนี้ฉันได้ติดตั้ง Sass บน mac และสั่งให้ดูไฟล์ scss สำหรับอินพุตและไฟล์ css สำหรับเอาต์พุตที่สร้างขึ้น จากหลาย ๆ บทความ Sass ถูกใช้กับ Compass ฉันสงสัยว่าทำไมถึงเป็นเช่นนั้นและ Compass เพิ่มอะไรให้ Sass มาโดยปราศจากอะไร หากคุณสามารถยกตัวอย่างให้ดีขึ้น ขอบคุณ

166 css  sass  compass-sass 

เป็นไปได้ไหมที่จะตั้งค่าองค์ประกอบbackground-imageSVG<path> ตัวอย่างเช่นถ้าฉันตั้งองค์ประกอบclass="wall"สไตล์ CSS จะใช้.wall {fill: red;}งานได้ แต่.wall{background-image: url(wall.jpg)}จะไม่เป็นเช่น.wall {background-color: red;}นั้น

166 html  css  image  svg  background-image 

ฉันมีหน้า (XHTML Strict) ที่ฉันลอยรูปภาพควบคู่ไปกับย่อหน้าข้อความปกติ ทุกอย่างเป็นไปด้วยดียกเว้นเมื่อมีการใช้รายการแทนย่อหน้า สัญลักษณ์แสดงหัวข้อย่อยของรายการซ้อนทับภาพลอย การเปลี่ยนระยะขอบของรายการหรือรายการไม่ช่วยได้ อัตรากำไรขั้นต้นจะถูกคำนวณจากซ้ายของหน้า แต่ลอยผลักดันให้รายการไปทางขวาภายในliตัวเอง ดังนั้นระยะขอบจะช่วยถ้าฉันทำให้มันกว้างกว่าภาพ การลอยรายการที่อยู่ถัดจากรูปภาพก็ใช้งานได้ แต่ฉันไม่รู้ว่าเมื่อใดที่รายการถัดจากโฟลต ฉันไม่ต้องการลอยทุกรายการในเนื้อหาของฉันเพียงเพื่อแก้ไขปัญหานี้ นอกจากนี้การลอยซ้ายจะทำให้เลย์เอาต์เสียหายเมื่อรูปภาพลอยไปทางขวาแทนที่จะซ้ายของรายการ การตั้งค่าli { list-style-position: inside }จะย้ายสัญลักษณ์แสดงหัวข้อย่อยพร้อมกับเนื้อหา แต่ยังทำให้บรรทัดที่ตัดเพื่อเริ่มจัดตำแหน่งด้วยสัญลักษณ์แสดงหัวข้อย่อยแทนการจัดแนวกับบรรทัดด้านบน เห็นได้ชัดว่าปัญหานี้เกิดจากกระสุนแสดงผลนอกกล่องลอยลอยผลักเนื้อหาของกล่องไปทางขวา (ไม่ใช่กล่องตัวเอง) นี่คือวิธีที่ IE และ FF จัดการกับสถานการณ์และเท่าที่ฉันรู้ไม่ผิดตามข้อมูลจำเพาะ คำถามคือฉันจะป้องกันได้อย่างไร

166 html  css 

HTML ของฉันมีคลาสที่เรียกว่า .requiredว่ากำหนดให้กับฟิลด์ที่ต้องระบุ นี่คือ HTML: <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div …

166 css  forms  twitter-bootstrap-3  form-fields 

CSS ของฉัน: #content_right_head span { display:inline-block; width:180px; overflow:hidden !important; } ตอนนี้มันแสดงเนื้อหาเนื้อหา แต่ฉันต้องการแสดง เนื้อหาเนื้อหา ... ฉันต้องการแสดงจุดหลังเนื้อหา เนื้อหากำลังมาจากฐานข้อมูลแบบไดนามิก

166 html  css 

ฉันกำลังพัฒนาเว็บแอปโดยใช้ HTML5 และ jQuery สำหรับ iPad ซาฟารี ฉันพบปัญหาที่พื้นที่เลื่อนขนาดใหญ่ทำให้องค์ประกอบที่อยู่นอกจอปรากฏหลังจากล่าช้าเมื่อฉันเลื่อนลงไปที่องค์ประกอบเหล่านั้น สิ่งที่ฉันหมายถึงคือถ้าฉันมีแถวของภาพ (หรือแม้กระทั่ง div ที่มีการไล่ระดับสี) ที่เป็นหน้าจอเมื่อฉันเลื่อนลง (หรือขึ้น) ไปที่มันพฤติกรรมที่คาดหวังสำหรับองค์ประกอบที่จะปรากฏบนหน้าจอเป็น ฉันกำลังเลื่อนไปที่มัน อย่างไรก็ตามสิ่งที่ฉันเห็นก็คือองค์ประกอบจะไม่ปรากฏขึ้นจนกว่าฉันจะยกนิ้วออกจากหน้าจอและผู้เลื่อนภาพเคลื่อนไหวเสร็จสิ้น นี่เป็นสาเหตุของปัญหาที่เห็นได้ชัดเจนอย่างยิ่งสำหรับฉันทำให้ทุกอย่างดูไม่เปลี่ยนแปลงแม้ว่าจะไม่ใช่ ฉันเดาว่า iPad Safari กำลังพยายามทำบางอย่างเพื่อประหยัดหน่วยความจำ มีวิธีใดบ้างที่ฉันสามารถป้องกันไม่ให้สิ่งที่ขาดหายไปนี้เกิดขึ้น นอกจากนี้ฉันยังต้องซาบซึ้งถ้าใครสามารถแสดงความคิดเห็นเกี่ยวกับสิ่งที่ iPad Safari กำลังพยายามทำอยู่

165 css  ios  ipad  html  mobile-safari 

ฉันต้องการที่จะมีทางเลือกให้กับช่องทำเครื่องหมายมาตรฐาน - โดยทั่วไปฉันต้องการใช้ภาพและเมื่อผู้ใช้คลิกที่ภาพมันจะหายไปและวางซ้อนกล่องกา โดยพื้นฐานแล้วฉันต้องการทำสิ่งที่ Recaptcha 2 ทำเมื่อมันทำให้คุณคลิกภาพที่ตรงตามเกณฑ์ที่กำหนด คุณสามารถดูตัวอย่างของ Recaptcha ได้ที่นี่แต่ในบางครั้งคุณอาจจะสามารถแก้ปัญหาข้อความได้ซึ่งต่างจากการเลือกรูปภาพ ดังนั้นนี่คือภาพหน้าจอ: เมื่อคุณคลิกที่ภาพใดรูปหนึ่ง (ในกรณีนี้มีรูปภาพของสเต็ก) รูปภาพที่คุณคลิกจะมีขนาดเล็กลงและมีเครื่องหมายสีน้ำเงินปรากฏขึ้นเพื่อระบุว่าคุณได้ทำเครื่องหมายไว้แล้ว สมมติว่าฉันต้องการทำซ้ำตัวอย่างที่แน่นอนนี้ ฉันรู้ว่าฉันมีช่องทำเครื่องหมายที่ซ่อนอยู่ 9 ช่องและแนบ jQuery บางอย่างเพื่อให้เมื่อฉันคลิกที่ภาพก็จะเลือก / ยกเลิกการเลือกช่องทำเครื่องหมายที่ซ่อนอยู่ แต่สิ่งที่เกี่ยวกับการหดตัวของภาพ / เห็บซ้อนทับ?

165 javascript  jquery  css  html 

ฉันจะควบคุมภาพพื้นหลังและสีขององค์ประกอบร่างกายภายในได้iframeอย่างไร หมายเหตุองค์ประกอบของร่างกายที่ฝังตัวมีคลาสและiframeเป็นของหน้าเว็บที่เป็นส่วนหนึ่งของเว็บไซต์ของฉัน เหตุผลที่ฉันต้องการนี่คือเว็บไซต์ของฉันมีพื้นหลังสีดำกำหนดให้กับร่างกายและจากนั้นพื้นหลังสีขาวกำหนดให้กับ div ที่มีข้อความ เครื่องมือแก้ไข WYSIWYG ใช้iframeเนื้อหาเพื่อฝังเมื่อแก้ไข แต่ไม่รวม div ดังนั้นข้อความจึงอ่านยากมาก เนื้อหาของตัวiframeแก้ไขเมื่อมีคลาสที่ไม่ได้ใช้ที่อื่นดังนั้นฉันสมมติว่านี่ถูกใส่ไว้ที่นั่นเพื่อแก้ไขปัญหาเช่นนี้ อย่างไรก็ตามเมื่อฉันใช้สไตล์กับclass.bodyพวกเขาจะไม่แทนที่สไตล์ที่ใช้กับเนื้อความ สิ่งที่แปลกก็คือสไตล์นั้นปรากฏใน Firebug ดังนั้นฉันไม่รู้เลยว่าเกิดอะไรขึ้น! ขอบคุณ อัปเดต - ฉันได้ลองวิธีการแก้ปัญหาของ @ mikeq ในการเพิ่มสไตล์ให้กับคลาสที่เป็นคลาสของร่างกาย สิ่งนี้ไม่ทำงานเมื่อถูกเพิ่มลงในสไตล์ชีทของหน้าหลัก แต่มันจะทำงานเมื่อเพิ่มด้วย Firebug ฉันสมมติว่านี่เป็นเพราะ Firebug ถูกนำไปใช้กับองค์ประกอบทั้งหมดในหน้าในขณะที่ CSS ไม่ได้ใช้ภายใน iframes นี่หมายความว่าการเพิ่ม css หลังจากโหลดหน้าต่างด้วย JavaScript จะทำงานได้หรือไม่

165 css  iframe  styles  overriding 

ฉันมีองค์ประกอบดังต่อไปนี้: <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> มันแสดงข้อความโต้ตอบแบบโมดัลอะไรแบบนี้โดยทั่วไปมันใส่แถบเลื่อนไปทั่วทั้งหมดmodal-dialogและไม่ใช่modal-bodyเนื้อหาที่ฉันพยายามแสดง ภาพมีลักษณะดังนี้: ฉันจะได้รับแถบเลื่อนรอบmodal-bodyเท่านั้นได้อย่างไร ฉันลองกำหนดstyle="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"ให้modal-bodyแต่มันไม่ทำงาน

165 css  twitter-bootstrap