การเขียนโปรแกรม css

8

คำถาม CSS สำหรับมือใหม่ ผมคิดว่าwidth:autoสำหรับdisplay:blockองค์ประกอบความหมาย 'เติมช่องว่างที่มีอยู่' อย่างไรก็ตามสำหรับ<input>องค์ประกอบนี้ดูเหมือนจะไม่เป็นเช่นนั้น ตัวอย่างเช่น: <body> <form style='background-color:red'> <input type='text' style='background-color:green;display:block;width:auto'> </form> </body> สองคำถามแล้ว: มีคำจำกัดความว่า width: auto แปลว่าอะไร? ข้อกำหนด CSS ดูเหมือนคลุมเครือสำหรับฉัน แต่บางทีฉันอาจพลาดส่วนที่เกี่ยวข้อง มีวิธีที่จะบรรลุพฤติกรรมที่ฉันคาดหวังสำหรับช่องป้อนข้อมูลหรือไม่ - เช่น เติมพื้นที่ว่างเช่นองค์ประกอบระดับบล็อกอื่น ๆ ทำอย่างไร ขอบคุณ!

123 css

5

วิธีทำให้คุณสมบัติ CSS ล้นทำงานโดยซ่อนเป็นค่า

overflow: hiddenฉันกำลังมีช่วงเวลาที่ยากกับ โดยทั่วไปฉันกำลังพยายามซ่อนส่วนที่ล้นของรายการที่ไม่ได้เรียงลำดับซึ่งอยู่ในไฟล์<div>. ฉันไม่รู้ว่าทำไมถึงไม่ได้ผล แทนที่จะซ่อนมันกลับแบ่งรายการของฉันจากเค้าโครงแนวนอนเป็นเค้าโครงแนวตั้ง รายการที่ไม่เรียงลำดับคือภาพหมุนและคอนเทนเนอร์คือรายการ ด้านล่างนี้คือโค้ด CSS ของฉัน div.body .container .images { background: url(/images/images-background.jpg); height: 62px; margin-bottom: 17px; width: 384px; } div.body .container .images #images-previous { cursor: pointer; float: left; } div.body .container .images #images-next { cursor: pointer; float: left; } div.body .container .images .list { float: left; overflow: …

123 css overflow html

7

วิธีวางตำแหน่งข้อความบนรูปภาพใน css

ฉันจะจัดข้อความให้อยู่กึ่งกลางบนรูปภาพใน css ได้อย่างไร <div class="image"> <img src="sample.png"/> <div class="text"> <h2>Some text</h2> </div> </div> ฉันต้องการทำบางอย่างเช่นด้านล่าง แต่ฉันมีปัญหานี่คือ css ปัจจุบันของฉัน <style> .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; } </style> เมื่อฉันใช้ภาพพื้นหลังฉันไม่ได้รับผลลัพธ์ใด ๆ จาก html2pdf: <style> #image_container{ width: 1000px; …

123 html css

8

คุณใช้ HTML5 รีเซ็ต CSS ใดและเพราะเหตุใด [ปิด]

ปิด . คำถามนี้เป็นคำถามความคิดเห็นตาม ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบได้ด้วยข้อเท็จจริงและการอ้างอิงโดยแก้ไขโพสต์นี้ ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ คุณใช้ HTML5 รีเซ็ต CSS ใดและเพราะเหตุใด มีกรณีที่คุณพบว่าครอบคลุมมากกว่านี้หรือไม่? ฉันเริ่มใช้ HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ดูเหมือนจะใช้ได้ แต่ฉันสงสัยว่าจะมีอะไรที่ดีกว่านี้หรือไม่

123 css html css-reset

7

ฉันจะตั้งศูนย์กลางองค์ประกอบสแปนในแนวนอนภายใน div ได้อย่างไร

ฉันกำลังพยายามจัดลิงก์สองลิงก์ "ดูเว็บไซต์" และ "ดูโครงการ" ภายใน div โดยรอบ ใครสามารถชี้ให้เห็นสิ่งที่ฉันต้องทำเพื่อให้งานนี้ JS Fiddle: http://jsfiddle.net/F6R9C/ HTML <div> <span> <a href="#" target="_blank">Visit website</a> <a href="#">View project</a> </span> </div> CSS div { background:red;overflow:hidden } span a { background:#222; color:#fff; display:block; float:left; margin:10px 10px 0 0; padding:5px 10px }

123 css

12

การป้องกันแคชผ่านพารามิเตอร์

เราต้องการแคชหน้าอกในการผลิต แต่ไม่ต้องเสียเวลามากมายในการหาระบบเพื่อทำเช่นนั้น ความคิดของฉันคือการใช้ param ต่อท้ายไฟล์ css และ js ด้วยหมายเลขเวอร์ชันปัจจุบัน: <link rel="stylesheet" href="base_url.com/file.css?v=1.123"/> คำถามสองข้อ: สิ่งนี้จะทำลายแคชได้อย่างมีประสิทธิภาพหรือไม่? พารามิเตอร์จะทำให้เบราว์เซอร์ไม่แคชการตอบสนองจาก url นั้นเนื่องจากพารามิเตอร์ระบุว่านี่เป็นเนื้อหาแบบไดนามิกหรือไม่

123 javascript html css caching

6

ความแตกต่างระหว่าง HTML“ overflow: auto” และ“ overflow: scroll”

เมื่อฉันกำลังศึกษาoverflowค่าของคุณสมบัติฉันพบค่าสองค่านี้: autoและscrollซึ่งจะเพิ่มแถบเลื่อนหากเนื้อหาล้นองค์ประกอบ ใครช่วยอธิบายหน่อยได้ไหมว่าอะไรคือความแตกต่างระหว่างพวกเขา?

123 html css

6

อย่างไรก็ตามเพื่อป้องกันไม่ให้ไฮไลต์องค์ประกอบสีน้ำเงินใน Chrome เมื่อคลิกอย่างรวดเร็ว?

ส่วนใหญ่ฉันไม่ได้กังวลเกี่ยวกับเรื่องนี้ แต่ฉันมีภาพหมุนและถ้าฉันคลิกที่ div ถัดไปและก่อนหน้าอย่างรวดเร็วพวกเขาจะถูกไฮไลต์ใน Chrome ฉันลองใช้โครงร่าง: ไม่มี แต่ไม่มีผล มีวิธีแก้ไขหรือไม่?

123 css google-chrome

5

การแปลง CSS3 ไม่ทำงาน

ฉันกำลังพยายามเปลี่ยนรายการเมนูโดยหมุน 10 องศา CSS ของฉันทำงานใน Firefox แต่ฉันไม่สามารถจำลองเอฟเฟกต์ใน Chrome และ Safari ได้ ฉันรู้ว่า IE ไม่รองรับคุณสมบัติ CSS3 นี้ดังนั้นจึงไม่ใช่ปัญหา ฉันใช้ CSS ต่อไปนี้: li a { -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); } ใครช่วยแนะนำหน่อยได้ไหมว่าฉันผิดพลาดตรงไหน ขอบคุณ

123 html css

4

จะจัดคอลัมน์ Flexbox ซ้ายและขวาได้อย่างไร?

ด้วย CSS ทั่วไปฉันสามารถลอยหนึ่งในสองคอลัมน์ไปทางซ้ายและอีกคอลัมน์หนึ่งทางขวาโดยมีช่องว่างระหว่างราง ฉันจะทำอย่างไรกับ flexbox http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } <div id="container"> <div id="a"> a </div> <div id="b"> b …

123 html css flexbox

6

จัดแนวตั้งในตาราง bootstrap

ฉันกำลังพยายามแสดงตารางที่มี 4 คอลัมน์ซึ่งหนึ่งในนั้นเป็นรูปภาพ ด้านล่างนี้คือภาพรวม: - ฉันต้องการจัดแนวข้อความให้อยู่ในตำแหน่งกึ่งกลางในแนวตั้ง แต่ดูเหมือนว่า css จะใช้งานไม่ได้ ฉันใช้ตารางตอบสนอง bootstrap แล้ว ฉันต้องการทราบว่าเหตุใดรหัสของฉันจึงไม่ทำงานและอะไรคือวิธีการที่ถูกต้องในการทำให้มันใช้งานได้ ต่อไปนี้เป็นรหัสสำหรับตาราง CSS img { height: 150px; width: 200px; } th, td { text-align: center; vertical-align: middle; } HTML <table id="news" class="table table-striped table-responsive"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Photo</th> </tr> </thead> <tbody> <?php $i=0; foreach ($result as …

123 html css twitter-bootstrap

13

จะเปลี่ยนรูปแบบของกล่องแจ้งเตือนได้อย่างไร?

ฉันต้องการเปลี่ยนรูปแบบของปุ่ม "ตกลง" ในกล่องการแจ้งเตือน <head> <script type="text/javascript"> function show_alert() { alert("Hello! I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด

123 javascript css

12

เครื่องมือใดในการสร้างสไตล์ CSS แบบอินไลน์โดยอัตโนมัติเพื่อสร้างโค้ด HTML ของอีเมล [ปิด]

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน7 ปีที่ผ่านมา ปรับปรุงคำถามนี้ เมื่อคุณดูที่http://www.campaignmonitor.com/css/คุณได้เรียนรู้ว่าคุณจำเป็นต้องฝังสไตล์อินไลน์ใน HTML ของคุณเพื่อให้สามารถอ่านอีเมลของคุณในโปรแกรมรับส่งเมลใด ๆ คุณรู้หรือไม่ว่าเครื่องมือหรือสคริปต์ใด ๆ ในการแปลงไฟล์ HTML โดยอัตโนมัติโดยประกาศเป็นไฟล์ HTML ที่มีแอตทริบิวต์สไตล์ CCS แบบอินไลน์เท่านั้น แก้ไข : โซลูชัน Javascript ใด ๆ (เช่น: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ )? ด้วย jQuery?

122 html css email inline html-email

13

jQuery & CSS - ลบ / เพิ่มการแสดงผล: ไม่มี

ฉันมี div ในคลาสนี้: .news{ width:710px; float:left; border-bottom:1px #000000 solid; font-weight:bold; display:none; } และฉันต้องการใช้วิธี jQuery บางอย่างลบการแสดงผลนั้น: ไม่มี; (ดังนั้น div จะแสดง) และเพิ่มอีกครั้ง (ดังนั้น div จะเป็นเงา) ฉันจะทำมันได้อย่างไร? ไชโย

122 jquery css

10

การสืบค้นสื่อเพื่อตรวจสอบว่าอุปกรณ์เป็นหน้าจอสัมผัสหรือไม่

วิธีใดที่ปลอดภัยที่สุดโดยใช้การสืบค้นสื่อเพื่อให้บางสิ่งเกิดขึ้นเมื่อไม่ได้อยู่บนอุปกรณ์หน้าจอสัมผัส หากไม่มีวิธีใดคุณแนะนำให้ใช้โซลูชัน JavaScript เช่น!window.Touchหรือ Modernizr หรือไม่

122 css touch media-queries

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