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

4

วิธีการจัดตำแหน่งในแนวตั้ง <li> องค์ประกอบใน <ul>?

ฉันมีแนวนอน<ul>และฉันต้องจัดกึ่งกลาง<li>ในแนวตั้ง มาร์กอัปของฉันอยู่ด้านล่าง แต่ละอัน<li>มีเส้นขอบและฉันต้องการให้ไอเท็มรวมถึงเนื้อหาอยู่ตรงกลางในแนวตั้ง กรุณาช่วย; ฉันยังใหม่กับ CSS <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .toolbar li { border: solid 1px black; display: block; float: left; height: 100px; list-style-type: none; margin: 10px; vertical-align: middle; } .toolbar li.button { height: 50px; } </style> …

97 css

10

ฉันจะทำให้พื้นที่ทั้งหมดของรายการในแถบนำทางของฉันสามารถคลิกเป็นลิงก์ได้อย่างไร

ฉันมีแถบนำทางแนวนอนที่สร้างขึ้นจากรายการที่ไม่เรียงลำดับและแต่ละรายการมีช่องว่างภายในมากมายเพื่อให้ดูดี แต่พื้นที่เดียวที่ใช้เป็นลิงก์ได้คือข้อความ ฉันจะให้ผู้ใช้คลิกที่ใดก็ได้ในรายการเพื่อเปิดใช้งานลิงก์ได้อย่างไร #nav { background-color: #181818; margin: 0px; overflow: hidden; } #nav img { float: left; padding: 5px 10px; margin-top: auto; margin-bottom: auto; vertical-align: bottom; } #nav ul { list-style-type: none; margin: 0px; background-color: #181818; float: left; } #nav li { display: block; float: left; padding: 25px 10px; } …

97 html css anchor

6

ผลของการเข้ารหัสรูปภาพใน base64 คืออะไร?

ถ้าฉันแปลงรูปภาพ (jpg หรือ png) เป็น base64 ภาพจะใหญ่ขึ้นหรือจะมีขนาดเท่ากัน? จะยิ่งใหญ่ขนาดไหน? แนะนำให้ใช้รูปภาพที่เข้ารหัส base64 บนเว็บไซต์ของฉันหรือไม่

97 html css image base64

4

ฉันจะตั้งค่าแถบเลื่อน textarea ให้ด้านล่างเป็นค่าเริ่มต้นได้อย่างไร

ฉันมีพื้นที่ข้อความที่กำลังโหลดใหม่แบบไดนามิกเนื่องจากกำลังส่งข้อมูลเข้าของผู้ใช้มันจะรีเฟรชตัวเองทุกสองสามวินาที เมื่อจำนวนข้อความในพื้นที่ข้อความนี้เกินขนาดของพื้นที่ข้อความแถบเลื่อนจะปรากฏขึ้น อย่างไรก็ตามแถบเลื่อนไม่สามารถใช้งานได้จริงเพราะถ้าคุณเริ่มเลื่อนลงสองสามวินาทีต่อมาพื้นที่ข้อความจะรีเฟรชและนำแถบเลื่อนกลับขึ้นไปด้านบน ฉันต้องการตั้งค่าแถบเลื่อนให้โดยค่าเริ่มต้นแสดงข้อความด้านล่างสุด ใครมีความคิดว่าจะทำอย่างไร

97 javascript css scroll textarea

9

ตรวจสอบองค์ประกอบ CSS ที่แสดงด้วย JavaScript

เป็นไปได้ไหมที่จะตรวจสอบว่า CSS ขององค์ประกอบdisplay == blockหรือnoneใช้ JavaScript

97 javascript css

6

100vw ทำให้ล้นในแนวนอน แต่ถ้ามากกว่าหนึ่ง?

สมมติว่าคุณมีสิ่งนี้: html, body {margin: 0; padding: 0} .box {width: 100vw; height: 100vh} <div class="box">Screen 1</div> คุณจะได้รับสิ่งที่เต็มหน้าจอโดยไม่มีแถบเลื่อน แต่เพิ่มอีก: <div class="box">Screen 1</div> <div class="box">Screen 2</div> คุณไม่เพียง แต่จะได้รับแถบเลื่อนแนวตั้ง (คาดว่า) แต่ยังมีแถบเลื่อนแนวนอนเล็กน้อย ฉันรู้ว่าคุณสามารถละความกว้างหรือตั้งค่าเป็น width: 100% แต่ฉันสงสัยว่าทำไมจึงเกิดเหตุการณ์นี้ขึ้น 100vw ควรเป็น "100% ของความกว้างวิวพอร์ต" ไม่ใช่หรือ

97 css

11

: not (: empty) ตัวเลือก CSS ไม่ทำงาน?

ฉันมีเวลาพอสมควรกับตัวเลือก CSS นี้ซึ่งไม่ต้องการทำงานเมื่อฉันเพิ่ม:not(:empty)เข้าไป ดูเหมือนว่าจะทำงานได้ดีกับการรวมกันของตัวเลือกอื่น ๆ : input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } ถ้าฉันถอดชิ้น:not(:empty)ส่วนออกมันก็ใช้ได้ดี แม้ว่าฉันจะเปลี่ยนตัวเลือกinput:not(:empty)แต่ก็ยังไม่ได้เลือกช่องป้อนข้อมูลที่มีการพิมพ์ข้อความลงไป สิ่งนี้เสียหรือฉันไม่ได้รับอนุญาตให้ใช้:emptyภายใน:not()ตัวเลือก? สิ่งเดียวที่ฉันคิดได้คือเบราว์เซอร์ยังคงบอกว่าองค์ประกอบนั้นว่างเปล่าเพราะไม่มีลูกเพียงแค่ "ค่า" ต่อการพูด ที่ไม่:emptyเลือกไม่ได้มีการทำงานที่แยกต่างหากสำหรับองค์ประกอบเข้ากับองค์ประกอบปกติ? สิ่งนี้ดูไม่น่าจะเป็นไปได้เพราะการใช้งาน:emptyบนฟิลด์และการพิมพ์บางสิ่งลงไปจะทำให้เอฟเฟกต์ทางเลือกหายไป (เนื่องจากไม่ว่างเปล่าอีกต่อไป) ทดสอบใน Firefox 8 และ Chrome

97 html css css-selectors

5

มีวิธีทำให้ textarea ยืดให้พอดีกับเนื้อหาโดยไม่ต้องใช้ PHP หรือ JavaScript หรือไม่?

ฉันกำลังกรอก textarea ที่มีเนื้อหาเพื่อให้ผู้ใช้แก้ไข เป็นไปได้ไหมที่จะทำให้มันยืดออกเพื่อให้พอดีกับเนื้อหาด้วย CSS (เช่นoverflow:showdiv)

97 html css

9

คุณจะทำให้สีพื้นหลังจางลงโดยใช้ jquery ได้อย่างไร?

ฉันจะทำให้เนื้อหาข้อความจางลงด้วย jQuery ได้อย่างไร ประเด็นคือการดึงความสนใจของผู้ใช้ไปที่ข้อความ

96 jquery css background-color fade

12

Safari ใน ios8 กำลังเลื่อนหน้าจอเมื่อองค์ประกอบคงที่ได้รับโฟกัส

ใน IOS8 Safari มีข้อผิดพลาดใหม่พร้อมตำแหน่งที่แก้ไข หากคุณโฟกัสพื้นที่ข้อความที่อยู่ในแผงคงที่ Safari จะเลื่อนคุณไปที่ด้านล่างของหน้า สิ่งนี้ทำให้ UI ทุกประเภทไม่สามารถใช้งานได้เนื่องจากคุณไม่มีวิธีป้อนข้อความลงในพื้นที่ข้อความโดยไม่ต้องเลื่อนหน้าลงจนสุดและสูญเสียตำแหน่งของคุณ มีวิธีใดในการแก้ไขข้อบกพร่องนี้อย่างหมดจดหรือไม่? #a { height: 10000px; background: linear-gradient(red, blue); } #b { position: fixed; bottom: 20px; left: 10%; width: 100%; height: 300px; } textarea { width: 80%; height: 300px; } <html> <body> <div id="a"></div> <div id="b"><textarea></textarea></div> </body> </html>

96 javascript ios css safari ios8

14

ปุ่ม bootstrap ของ twitter จัดแต่งทรงผม

ปุ่ม Twitter-Bootstrap นั้นสวยงามมาก ลองใช้โดยการเลื่อนดู แต่มีสี จำกัด มีวิธีใดบ้างที่ฉันสามารถเปลี่ยนสีพื้นฐานของปุ่มในขณะที่ยังคงเอฟเฟกต์การวางเมาส์เหนือที่สวยงามที่ bootstrap ทำให้สวยงามและง่ายดาย ฉันไม่รู้โดยสิ้นเชิงว่า css / javascript ดูเหมือนว่า twitter ใช้เพื่อรักษาเอฟเฟกต์เหล่านั้น

96 css button twitter-bootstrap

3

เซลล์ตารางที่มีขนาดเท่ากันเพื่อเติมเต็มความกว้างทั้งหมดของตารางที่มี

มีวิธีการใช้ HTML / CSS (ที่มีขนาดสัมพัทธ์) เพื่อทำให้แถวของเซลล์ยืดความกว้างทั้งหมดของตารางภายในตารางหรือไม่? <table width="100%">เซลล์ที่ควรจะมีความกว้างเท่ากันและขนาดที่โต๊ะด้านนอกยังเป็นแบบไดนามิกที่มี ปัจจุบันถ้าฉันไม่ระบุขนาดคงที่ เซลล์จะปรับขนาดอัตโนมัติเพื่อให้พอดีกับเนื้อหา

96 html css html-table

9

จะวาดรูปหลายเหลี่ยมบนผ้าใบ HTML5 ได้อย่างไร?

ฉันต้องการรู้วิธีวาดรูปหลายเหลี่ยมบนผืนผ้าใบ โดยไม่ต้องใช้ jQuery หรืออะไรแบบนั้น

96 javascript css html canvas

5

ประสิทธิภาพ CSS เทียบกับ translateZ (0)

บล็อกจำนวนมากแสดงให้เห็นถึงประสิทธิภาพที่เพิ่มขึ้นในการ 'หลอกล่อ' GPU ให้คิดว่าองค์ประกอบนั้นเป็น 3 มิติโดยใช้transform: translateZ(0)เพื่อเร่งความเร็วของภาพเคลื่อนไหวและการเปลี่ยนภาพ ฉันสงสัยว่ามีผลต่อการใช้การแปลงนี้ในลักษณะต่อไปนี้หรือไม่: * { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }

96 performance css translate-animation

16

ระยะขอบเซลล์ CSS

ในเอกสาร HTML ของฉันฉันมีตารางที่มีสองคอลัมน์และหลายแถว ฉันจะเพิ่มช่องว่างระหว่างคอลัมน์แรกและคอลัมน์ที่สองด้วย css ได้อย่างไร ฉันได้ลองใช้ "margin-right: 10px;" ไปยังแต่ละเซลล์ทางด้านซ้ายมือ แต่ไม่มีผลใด ๆ

96 html css cell margin css-tables

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