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

จากมาร์กอัปต่อไปนี้ฉันจะใช้ CSS เพื่อบังคับหนึ่งเซลล์ (เซลล์ทั้งหมดในคอลัมน์) ให้พอดีกับความกว้างของเนื้อหาภายในแทนที่จะยืดได้ (ซึ่งเป็นพฤติกรรมเริ่มต้น) <style type="text/css"> td.block { border: 1px solid black; } </style> <table style="width: 100%;"> <tr> <td class="block">this should stretch</td> <td class="block">this should stretch</td> <td class="block">this should be the content width</td> </tr> </table> แก้ไข: ฉันรู้ว่าฉันสามารถเขียนโค้ดความกว้างได้ยาก แต่ฉันไม่อยากทำเพราะเนื้อหาที่จะไปในคอลัมน์นั้นเป็นแบบไดนามิก ดูภาพด้านล่างภาพแรกคือสิ่งที่มาร์กอัปสร้าง รูปที่สองคือสิ่งที่ฉันต้องการ

266 html  css  html-table 

ฉันมีองค์ประกอบหลัก: <parent></parent> และฉันต้องการเติมกลุ่มนี้ด้วยองค์ประกอบลูก: <parent> <child></child> <child></child> <child></child> </parent> แม่แบบ: <div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div> แม่แบบเด็ก: <div class="child">Test</div> ตั้งแต่parentและchildเป็นสองส่วนแยกสไตล์ของพวกเขาจะถูกล็อคในขอบเขตของตัวเอง ในองค์ประกอบหลักของฉันฉันพยายามทำ: .parent .child { // Styles for child } แต่.childสไตล์ไม่ได้ถูกนำไปใช้กับchildส่วนประกอบ ฉันพยายามใช้styleUrlsเพื่อรวมparentสไตล์ชีทของchildองค์ประกอบเข้าด้วยกันเพื่อแก้ไขปัญหาขอบเขต: // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] แต่นั่นไม่ได้ช่วยลองวิธีอื่นโดยดึงchildสไตล์ชีทเข้าไปparentแต่ก็ไม่ได้ช่วยอะไร ดังนั้นคุณจะกำหนดสไตล์องค์ประกอบลูกที่รวมอยู่ในองค์ประกอบหลักได้อย่างไร

266 css  angular  angular-components 

ผมสามารถมองเห็นในการอ้างอิง CSS วิธีการตั้งค่าความโปร่งใสของภาพและวิธีการตั้งค่าภาพพื้นหลัง แต่ฉันจะรวมสองสิ่งนี้เพื่อตั้งค่าภาพพื้นหลังแบบโปร่งใสได้อย่างไร ฉันมีภาพที่ฉันต้องการใช้เป็นพื้นหลัง แต่มันสว่างเกินไป - ฉันต้องการลดความทึบลงเหลือประมาณ 0.2 ฉันจะทำสิ่งนี้ได้อย่างไร #main { background-image: url(/wp-content/uploads/2010/11/tandem.jpg); }

264 css 

ฉันต้องปิดไอคอนภายใน<a>แท็กด้วยเหตุผลบางอย่าง มีวิธีที่เป็นไปได้ในการเปลี่ยนสีของไอคอนแบบอักษรที่ยอดเยี่ยมเป็นสีดำหรือไม่? หรือมันเป็นไปไม่ได้ตราบใดที่มันห่ออยู่ภายใน<a>แท็ก? ตัวอักษรยอดเยี่ยมควรเป็นแบบอักษรไม่ใช่ภาพใช่ไหม <a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

264 html  css  font-awesome 

นี่คือสิ่งที่ฉันพยายาม (ดูที่นี่ ): body { overflow: hidden; } span { border: solid 2px blue; white-space: nowrap; text-overflow: ellipsis; } โดยพื้นฐานแล้วฉันต้องการให้ระยะห่างลดลงด้วยจุดไข่ปลาเมื่อหน้าต่างมีขนาดเล็ก ฉันทำอะไรผิด?

264 html  css 

ฉันมีปุ่มลิงค์ภายใน<td>ที่ฉันต้องปิดการใช้งาน สิ่งนี้ใช้ได้กับ IE แต่ไม่ทำงานใน Firefox และ Chrome โครงสร้าง - <td>การเชื่อมโยงภายใน ฉันไม่สามารถเพิ่มคอนเทนเนอร์ใด ๆ ใน<td>(เช่น div / span) ฉันลองทั้งหมดต่อไปนี้ แต่ไม่ทำงานบน Firefox (ใช้ 1.4.2 js): $(td).children().each(function () { $(this).attr('disabled', 'disabled'); }); $(td).children().attr('disabled', 'disabled'); $(td).children().attr('disabled', true); $(td).children().attr('disabled', 'true'); หมายเหตุ - ฉันไม่สามารถยกเลิกการลงทะเบียนฟังก์ชั่นคลิกสำหรับแท็กจุดยึดได้เนื่องจากมีการลงทะเบียนแบบไดนามิก และฉันต้องแสดงลิงค์ในโหมดคนพิการ

263 javascript  jquery  html  css 

ฉันมีข้อความใหญ่ย่อหน้าหนึ่งซึ่งแบ่งออกเป็นย่อหน้าย่อยด้วย<br>: <p> Blah blah blah. <br/> Blah blah blah. Blah blah blah. Blah blah blah. <br/> Blah blah blah. </p> ฉันต้องการขยายช่องว่างระหว่างอนุวรรคเหล่านี้เหมือนมีสอง<br>อย่างหรืออะไรทำนองนั้น ฉันรู้ว่าวิธีที่ถูกต้องในการทำเช่นนี้คือการใช้<p></p>แต่ตอนนี้ฉันไม่สามารถเปลี่ยนเลย์เอาต์นี้ดังนั้นฉันกำลังมองหาวิธีแก้ปัญหา CSS เท่านั้น ฉันได้พยายามตั้งค่า<br>'s line-heightและheightมีdisplay: blockฉันยัง Googled และกองมากเกิน-ED สั้น ๆ แต่ไม่ได้หาทางแก้ปัญหาใด ๆ สิ่งนี้เป็นไปได้หรือไม่โดยไม่ต้องเปลี่ยนเลย์เอาต์?

263 html  css 

ฉันกำลังพยายามใช้:beforeตัวเลือกเพื่อวางรูปภาพเหนือรูปภาพอื่น แต่ฉันพบว่ามันใช้งานไม่ได้กับการวางภาพก่อนimgองค์ประกอบเพียงองค์ประกอบอื่น ๆ โดยเฉพาะสไตล์ของฉันคือ: .container { position: relative; display: block; } .overlay:before { content: url(images/[someimage].png); position: absolute; left:-20px; top: -20px; } และฉันพบว่ามันใช้งานได้ดี: <a href="[url]" class="container"> <span class="overlay"/> <img width="200" src="[url]"/> </a> แต่นี่ไม่ได้: <a href="[url]" class="container"> <img width="200" src="[url]" class="overlay"/> </a> ฉันสามารถใช้divหรือpองค์ประกอบแทนสิ่งspanนั้นและเบราว์เซอร์ซ้อนทับภาพของฉันอย่างถูกต้องเหนือภาพในimgองค์ประกอบ แต่ถ้าฉันใช้คลาสซ้อนทับกับimgตัวเองมันไม่ทำงาน ฉันต้องการให้มันใช้งานได้เพราะนั่นspanทำให้ฉันขุ่นเคือง แต่ที่สำคัญกว่านั้นฉันมีบล็อกโพสต์ประมาณ 100 โพสต์ที่ฉันต้องการแก้ไขและฉันสามารถทำได้ในคราวเดียวถ้าฉันสามารถปรับเปลี่ยนสไตล์ชีทได้ แต่ถ้าฉันต้องย้อนกลับไปและเพิ่มspanองค์ประกอบพิเศษระหว่างaและimgองค์ประกอบสิ่งนี้จะทำงานได้มากขึ้น

262 html  css 

CSS กด Div ไปที่ด้านล่างของหน้า โปรดดูที่ลิงก์นั้นฉันต้องการสิ่งที่ตรงกันข้าม: เมื่อเนื้อหาล้นไปยังแถบเลื่อนฉันต้องการให้ส่วนท้ายของฉันอยู่ในสภาพสมบูรณ์ตลอดเวลาด้านล่างของหน้าเช่นกองมากเกิน ฉันมี div ด้วยid="footer"และ CSS นี้: #footer { position: absolute; bottom: 30px; width: 100%; } แต่สิ่งที่มันทำคือไปที่ด้านล่างของวิวพอร์ตและอยู่ที่นั่นแม้ว่าคุณจะเลื่อนลงดังนั้นมันจะไม่อยู่ที่ด้านล่างอีกต่อไป ภาพ: ขออภัยหากไม่ได้รับการชี้แจงฉันไม่ต้องการให้แก้ไขเพื่อให้อยู่ที่ด้านล่างสุดของเนื้อหาทั้งหมดเท่านั้น

261 css  positioning  css-position  footer 

ฉันมีโครงการที่ต้องพิมพ์ตาราง HTML ที่มีหลายแถว ปัญหาของฉันคือวิธีพิมพ์ตารางในหลาย ๆ หน้า บางครั้งมันจะตัดแถวครึ่งทำให้ไม่สามารถอ่านได้เพราะครึ่งหนึ่งอยู่ที่ขอบเลือดออกของหน้ากระดาษและส่วนที่เหลือจะพิมพ์ที่ด้านบนของหน้าถัดไป ทางออกที่เป็นไปได้เพียงอย่างเดียวที่ฉันคิดได้คือใช้ DIV แบบเรียงซ้อนแทนที่จะใช้ตารางและบังคับให้หยุดพักหน้าหากจำเป็น .. แต่ก่อนที่จะผ่านการเปลี่ยนแปลงทั้งหมดฉันคิดว่าฉันสามารถถามได้ที่นี่ก่อน

261 html  css  printing  html-table 

ฉันพยายามสร้างตารางที่มีหัวเรื่องคงที่และเนื้อหาที่เลื่อนได้โดยใช้ตาราง bootstrap 3 น่าเสียดายที่โซลูชันที่ฉันพบไม่สามารถทำงานร่วมกับ bootstrap หรือทำให้สไตล์ยุ่งเหยิง ที่นี่มีตาราง bootstrap ที่เรียบง่าย แต่ด้วยเหตุผลบางอย่างสำหรับฉันไม่ทราบความสูงของร่างกายที่ไม่ใช่ 10px height: 10px !important; overflow: scroll; ตัวอย่าง: <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody style="height: 10px !important; overflow: scroll; "> <tr> <td class="filterable-cell">111 Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> …

261 html  css  twitter-bootstrap  html-table 

ฉันมีตารางที่ฉันแสดง / ซ่อนคอลัมน์แบบเต็มโดย jQuery ผ่านคลาส CSS ที่ไม่มีอยู่: <table> <thead> <tr> <th></th> <th class="target"></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td class="target"></td> <td></td> </tr> <tr> <td></td> <td class="target"></td> <td></td> </tr> </tbody> </table> ด้วย DOM นี้ฉันสามารถทำได้ในหนึ่งบรรทัดผ่าน jQuery: $('.target').css('display','none'); สิ่งนี้ทำงานได้อย่างสมบูรณ์ แต่สามารถใช้คลาส CSS ที่ไม่ได้กำหนดได้หรือไม่ ฉันควรสร้างคลาสที่ว่างสำหรับมันหรือไม่? <style>.target{}</style> มีผลข้างเคียงหรือมีวิธีที่ดีกว่าในการทำเช่นนี้?

260 html  css  w3c-validation  web-standards 

ฉันต้องการออกแบบเว็บเพจที่มีแบนเนอร์และ iframe ฉันหวังว่า iframe สามารถเติมเต็มความสูงของหน้าที่เหลือทั้งหมดและปรับขนาดโดยอัตโนมัติเมื่อเบราว์เซอร์กำลังปรับขนาด เป็นไปได้ไหมที่จะทำได้โดยไม่ต้องเขียนโค้ด Javascript ด้วย CSS เท่านั้น? ฉันลองตั้งค่าheight:100%iframe ผลลัพธ์ค่อนข้างใกล้ แต่ iframe พยายามเติมเต็มความสูงของหน้ารวมถึง30pxความสูงขององค์ประกอบ div banner ดังนั้นฉันจึงมี scrollbar แนวตั้งที่ไม่จำเป็น มันไม่สมบูรณ์แบบ หมายเหตุการอัปเดต : ขอโทษด้วยที่ฉันไม่อธิบายคำถามฉันลองใช้ CSS margin, padding attribute บน DIV เพื่อครอบครองส่วนที่เหลือทั้งหมดของหน้าเว็บให้ประสบความสำเร็จ แต่เคล็ดลับใช้ไม่ได้กับ iframe <body> <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div> <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe> </body> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ความคิดใด ๆ ที่ชื่นชม

260 html  css  iframe 

ฉันต้องการลบการเยื้องออกจากulทั้งหมด ฉันพยายามตั้งmargin, padding, text-indentไป0แต่ไม่มีประโยชน์ ดูเหมือนว่าการตั้งค่าtext-indentเป็นจำนวนลบเป็นการหลอกลวง แต่นั่นเป็นวิธีเดียวที่จะลบการเยื้องได้หรือไม่

260 html  css 

ฉันต้องการที่จะมีรายการ "ภายใน" ที่มีสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลขทศนิยมล้างทั้งหมดด้วยบล็อกข้อความที่เหนือกว่า บรรทัดรายการที่สองต้องมีการเยื้องเหมือนแถวแรก! เช่น: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 1. Text 2. Text 3. longer Text, longer Text, longer Text, longer Text, longer …

260 html  css  html-lists