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

2

เครื่องหมายสแลชหมายถึงอะไรในชวเลขแบบอักษร CSS?

ฉันเห็นการประกาศ CSS ต่อไปนี้ในสไตล์ชีท: font: 12px/18px ... สิ่งที่ไม่12px/18pxเป็นส่วนหนึ่งหมายความว่า?

186 css fonts

17

$ (หน้าต่าง) .width () ไม่เหมือนกับการสืบค้นสื่อ

ฉันใช้ Twitter Bootstrap ในโครงการ เช่นเดียวกับรูปแบบการบูตเริ่มต้นฉันได้เพิ่มบางอย่างของตัวเอง //My styles @media (max-width: 767px) { //CSS here } ฉันใช้ jQuery เพื่อเปลี่ยนลำดับขององค์ประกอบบางอย่างบนหน้าเว็บเมื่อความกว้างของวิวพอร์ตน้อยกว่า 767px $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } ปัญหาที่ฉันมีคือความกว้างที่คำนวณโดย$(window).width()และความกว้างที่คำนวณโดย CSS ดูเหมือนจะไม่เหมือนกัน เมื่อ$(window).width()ส่งคืน 767 css จะคำนวณความกว้างวิวพอร์ตเป็น 751 ดังนั้นจึงมีความแตกต่าง 16px มีใครรู้บ้างว่าอะไรทำให้เกิดสิ่งนี้และฉันจะแก้ปัญหาได้อย่างไร มีคนแนะนำว่าความกว้างของแถบเลื่อนไม่ได้ถูกนำมาพิจารณาและใช้$(window).innerWidth() …

186 jquery css twitter-bootstrap media-queries

8

วิธีข้ามไปที่ด้านบนสุดของหน้าเบราว์เซอร์

ฉันกำลังเขียนป๊อปอัพคำกริยาและฉันต้องการเบราว์เซอร์เพื่อข้ามไปยังด้านบนของหน้าจอเมื่อกดปุ่มเปิดโหมด มีวิธีการเลื่อนเบราว์เซอร์ไปด้านบนโดยใช้ jQuery หรือไม่?

186 javascript jquery css modal-dialog

4

ทวิตเตอร์ Bootstrap ปุ่มข้อความห่อคำ

สำหรับชีวิตของฉันฉันไม่สามารถรับปุ่ม bootstrap twitter เหล่านี้เพื่อตัดข้อความลงบนหลายบรรทัดพวกเขาดูเหมือนเป็นเช่นนั้น ฉันไม่สามารถโพสต์ภาพได้ดังนั้นนี่คือสิ่งที่กำลังทำ ... [นี่คือ bu] ข้อความตัน ฉันอยากให้มันดูเหมือนว่า [นี้เป็น ] [ข้อความปุ่ม] <div class="col-lg-3">  <div class="panel panel-default"> <div class="panel-body"> <h4>Posted on</h4> <p>22nd September 2013</p> <h4>Tags</h4> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <a href="#" class="btn btn-primary btn-xs col-lg-12" …

186 html css twitter-bootstrap web

7

จะทำให้องค์ประกอบ inline-block เติมส่วนที่เหลือของบรรทัดได้อย่างไร

เป็นไปได้ไหมที่ใช้ CSS และแท็ก DIV แบบอินไลน์บล็อก (หรืออะไรก็ได้) แทนการใช้ตาราง เวอร์ชันของตารางคือ (เพิ่มเส้นขอบเพื่อให้คุณเห็น): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <table style="width:100%;"> <tr> <td style="border:1px solid black;width:100px;height:10px;"></td> <td style="border:1px solid black;height:10px;"></td> </tr> </table> </body> </html> มันสร้างคอลัมน์ด้านซ้ายด้วยความกว้างคงที่ (ไม่ใช่ความกว้างร้อยละ) และคอลัมน์ด้านขวาที่ขยายเพื่อเติมเต็มพื้นที่ที่เหลืออยู่ในบรรทัด ฟังดูง่าย ๆ ใช่มั้ย นอกจากนี้เนื่องจากไม่มีสิ่งใด "ลอยตัว" ความสูงของคอนเทนเนอร์หลักจะขยายอย่างเหมาะสมเพื่อรวมความสูงของเนื้อหา - เริ่มต้น RANT - ฉันได้เห็นการใช้งาน …

186 css layout fixed-width

6

ค่อนข้างวางตำแหน่งองค์ประกอบโดยไม่ต้องใช้พื้นที่ในการไหลของเอกสาร

ฉันจะจัดวางองค์ประกอบและไม่ใช้พื้นที่ในผังเอกสารได้อย่างไร

186 html css positioning css-position

5

วิธีทำให้ flexbox มีขนาดเท่ากัน?

ฉันต้องการใช้ flexbox ที่มีจำนวนรายการที่มีความกว้างเท่ากันทั้งหมด ฉันสังเกตว่าเฟล็กบ็อกซ์กระจายพื้นที่รอบ ๆ อย่างสม่ำเสมอมากกว่าพื้นที่ ตัวอย่างเช่น: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> <div class="item">z</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล รายการแรกมีขนาดใหญ่กว่าชิ้นที่สองมาก ถ้าฉันมี 3 รายการ 4 รายการหรือ n รายการฉันต้องการให้พวกเขาทั้งหมดปรากฏในบรรทัดเดียวกันด้วยจำนวนช่องว่างต่อรายการเท่ากัน ความคิดใด ๆ http://codepen.io/anon/pen/gbJBqM

186 css flexbox

18

วิธีตัดคำข้อความใน HTML?

ข้อความแบบaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaที่เกินความกว้างของ a div(พูด200px) จะถูกห่อได้อย่างไร? ฉันเปิดให้โซลูชันชนิดใดก็ได้เช่น CSS, jQuery เป็นต้น

185 html css word-wrap

16

ไอคอนชัดเจนภายในข้อความที่ป้อน

มีวิธีที่รวดเร็วในการสร้างองค์ประกอบข้อความที่มีไอคอนด้านขวาเพื่อล้างองค์ประกอบการป้อนข้อมูลตัวเอง (เช่นช่องค้นหา google)? ฉันมองไปรอบ ๆ แต่ฉันพบวิธีใส่ไอคอนเป็นพื้นหลังขององค์ประกอบอินพุตเท่านั้น มีปลั๊กอิน jQuery หรืออย่างอื่นหรือไม่? ฉันต้องการไอคอนภายในองค์ประกอบข้อความที่ป้อนเช่น: -------------------------------------------------- | X| --------------------------------------------------

185 javascript jquery html css

12

วิธีการเปลี่ยนรูปปุ่มอินพุตโดยใช้ CSS

ดังนั้นฉันสามารถสร้างปุ่มอินพุตพร้อมภาพโดยใช้ <INPUT type="image" src="/images/Btn.PNG" value=""> แต่ฉันไม่สามารถรับพฤติกรรมเดียวกันโดยใช้ CSS ตัวอย่างเช่นฉันได้ลอง <INPUT type="image" class="myButton" value=""> โดยที่ "myButton" ถูกกำหนดในไฟล์ CSS เป็น .myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } ถ้านั่นคือทั้งหมดที่ฉันต้องการฉันสามารถใช้รูปแบบดั้งเดิมได้ แต่ฉันต้องการเปลี่ยนลักษณะที่ปรากฏของปุ่มบนโฮเวอร์ (โดยใช้myButton:hoverคลาส) ฉันรู้ว่าลิงก์นั้นดีเพราะฉันสามารถโหลดภาพพื้นหลังสำหรับส่วนอื่น ๆ ของหน้าเว็บ (เช่นเดียวกับการตรวจสอบ) ฉันพบตัวอย่างบนเว็บของวิธีการใช้ JavaScript แต่ฉันกำลังมองหาโซลูชัน CSS ฉันใช้ Firefox 3.0.3 ถ้านั่นสร้างความแตกต่าง

184 css input-button-image

12

ใช้สไตล์เฉพาะบน IE

นี่คือบล็อก CSS ของฉัน: .actual-form table { padding: 5px 0 15px 15px; margin: 0 0 30px 0; display: block; width: 100%; background: #f9f9f9; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } ฉันต้องการ IE 7, 8 และ 9 เพียงเพื่อ "เห็น" width: 100% วิธีที่ง่ายที่สุดในการทำสิ่งนี้ให้สำเร็จคืออะไร?

184 css internet-explorer

8

ฉันจะส่ง <div> ภายในไปยังด้านล่างของ parent <div> ได้อย่างไร

div ภายในรูปภาพ div และรหัสด้านล่างอื่น เพราะจะมีข้อความและรูปภาพของ div div และ div สีแดงจะเป็นองค์ประกอบสุดท้ายของ div parent <div style="width: 200px; height: 150px; border: 1px solid black;"> <div style="width: 100%; height: 50px; border: 1px solid red;"> </div> </div>

184 css html

6

ฉันจะป้องกันเนื้อหาซ้อนทับของแถบเลื่อนใน IE10 ได้อย่างไร

ใน IE10 แถบเลื่อนไม่ได้มีเสมอ ... และเมื่อมันปรากฏขึ้นมาเป็นภาพซ้อนทับ ... มันเป็นคุณสมบัติเจ๋ง แต่ฉันต้องการปิดสำหรับเว็บไซต์เฉพาะของฉันเนื่องจากเป็นแอปพลิเคชันแบบเต็มหน้าจอและของฉัน โลโก้และเมนูต่าง ๆ จะสูญหายไป IE10: โครเมียม: ใครรู้วิธีการเลื่อนแถบเลื่อนได้รับการแก้ไขในตำแหน่งบน IE10? ล้น - y: เลื่อนดูไม่ทำงาน! มันแค่วางไว้อย่างถาวรบนเว็บไซต์ของฉัน อาจเป็น bootstrap ทำให้เกิดปัญหา แต่ส่วนใดที่ฉันไม่รู้ ดูตัวอย่างได้ที่นี่: http://twitter.github.io/bootstrap/

183 html css scrollbar internet-explorer-11 internet-explorer-10

14

เป็นวิธีที่ง่ายกว่าในการสร้าง div div แทนที่จะใช้รูปภาพ?

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

183 html css geometry css-shapes

8

CSS อยู่ตรงกลางแนวนอนของ div คงที่?

#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } ฉันรู้ว่าคำถามนี้เป็นล้านครั้ง แต่ฉันไม่สามารถหาวิธีแก้ปัญหากรณีของฉันได้ ฉันมี div ซึ่งควรแก้ไขบนหน้าจอแม้ว่าหน้าจะถูกเลื่อนมันควรอยู่กึ่งกลางหน้าจอเสมอ! div ควรมี500pxความกว้างควรอยู่30pxห่างจากด้านบน (margin-top) ควรอยู่กึ่งกลางในแนวนอนตรงกลางของหน้าทุกขนาดเบราว์เซอร์และไม่ควรเลื่อนเมื่อเลื่อนหน้าส่วนที่เหลือ เป็นไปได้ไหม

183 html css centering

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