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

16

ล้น: x: ซ่อนไม่ได้ป้องกันเนื้อหาจากการล้นในเบราว์เซอร์มือถือ

ฉันมีเว็บไซต์ที่นี่ ดูได้ในเบราว์เซอร์สก์ท็อปที่แถบเมนูสีดำถูกขยายครอบคลุมเฉพาะไปที่ขอบของหน้าต่างตั้งแต่มี bodyoverflow-x:hidden ในเบราว์เซอร์มือถือไม่ว่าจะเป็น Android หรือ iOS แถบเมนูสีดำจะแสดงความกว้างเต็มรูปแบบซึ่งจะทำให้ช่องว่างทางด้านขวาของหน้าเว็บ เท่าที่ฉันสามารถบอกได้ช่องว่างนี้ไม่ได้เป็นส่วนหนึ่งของhtmlหรือbodyแท็ก แม้ว่าฉันจะตั้งค่าวิวพอร์ตเป็นความกว้างเฉพาะใน<head>: <meta name="viewport" content="width=1100, initial-scale=1"> ไซต์ขยายเป็น 1100px แต่ยังคงมีช่องว่างเกิน 1100 ฉันพลาดอะไรไป ฉันจะเก็บวิวพอร์ตเป็น 1100 และตัดการโอเวอร์โฟลว์ได้อย่างไร

142 css overflow viewport mobile-browser

11

เพิ่มแถบเลื่อนแนวนอนลงในตาราง html

มีวิธีเพิ่มแถบเลื่อนแนวนอนในตาราง HTML หรือไม่? จริง ๆ แล้วฉันต้องการให้เลื่อนได้ทั้งแนวตั้งและแนวนอนขึ้นอยู่กับการเติบโตของตาราง แต่ฉันไม่สามารถเลื่อนแถบเลื่อนได้

142 html css html-table scrollbar

5

Google Chrome มี "การทำให้แบบอักษรเรียบ" หรือไม่

ฉันใช้ google webfonts และพวกเขาก็ปรับขนาดตัวอักษรให้ใหญ่สุด แต่ที่ 18px พวกมันดูแย่มาก ฉันได้อ่านที่นี่และมีคำตอบสำหรับการทำให้แบบอักษรเรียบ แต่ฉันไม่พบสิ่งที่อธิบายอย่างชัดเจนและตัวอย่างบางส่วนที่ฉันพบไม่ทำงานเลย h4หน้าตาของฉันแย่มากในทุกเบราว์เซอร์ แต่ Chrome นั้นแย่ที่สุด ใน Chrome แบบอักษรทั้งหมดของฉันดูแย่มาก ใครช่วยชี้ฉันในทิศทางที่ถูกต้องได้ไหม บางทีคุณอาจรู้จักทรัพยากรที่อธิบายสิ่งนี้อย่างชัดเจน? ขอบคุณ! หน้าจอตัวอย่าง # 1 ภาพหน้าจอนี้แสดงหน้าแรกของhttps://www.dartlang.org/ภาษาการเขียนโปรแกรมที่ทำโดย Google (เพื่อให้เราสามารถบอกได้ว่าเว็บไซต์นี้สร้างโดย Google) และใช้ Google Webfonts สกรีนช็อตแสดง Google Chrome ทางซ้าย Firefox / Internet Explorer ทางขวา: หน้าจอตัวอย่าง # 2 ภาพหน้าจอนี้แสดงหน้าข้อมูลผลิตภัณฑ์ใน Adobe.com โดยใช้ webfonts ที่จัดทำโดย Typekit Adobe & Typekit …

141 css google-chrome fonts google-webfonts

15

วิธีวาง div ในตำแหน่งกลางหน้าจอเมื่อหน้าใหญ่กว่าหน้าจอ

สวัสดีฉันกำลังใช้สิ่งที่คุ้นเคยกับสิ่งต่อไปนี้เพื่อให้ div อยู่ในตำแหน่งกลางหน้าจอ: <style type="text/css"> #mydiv { position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } </style> <div id="mydiv">Test Div</div> อย่างไรก็ตามปัญหาเกี่ยวกับสิ่งนี้คือมันวางตำแหน่งรายการที่อยู่ตรงกลางของหน้าไม่ใช่หน้าจอ ดังนั้นหากหน้าจอมีบางหน้าจอสูงและฉันอยู่ที่ด้านบนของหน้า (ส่วนบนของส่วนจะปรากฏบนหน้าจอ) …

141 css html window center

18

ฉันจะเปลี่ยนสีพื้นหลังด้วย JavaScript ได้อย่างไร

ใครรู้วิธีง่าย ๆ ในการสลับสีพื้นหลังของเว็บเพจโดยใช้ JavaScript

141 javascript css

6

วิธีลบเส้นขอบออกจากตาราง HTML อย่างสมบูรณ์

เป้าหมายของฉันคือการสร้างหน้า HTML ที่คล้ายกับ "กรอบรูป" กล่าวอีกนัยหนึ่งฉันต้องการทำหน้าว่างที่ล้อมรอบด้วย 4 รูปภาพ นี่คือรหัสของฉัน: <table> <tr> <td class="bTop" colspan="3"> </td> </tr> <tr> <td class="bLeft"> </td> <td class="middle"> </td> <td class="bRight"> </td> </tr> <tr> <td class="bBottom" colspan="3"> </td> </tr> </table> และคลาส CSS มีดังต่อไปนี้: .bTop { width: 960px; height: 111px; background-image: url('../Images/BackTop.jpg'); } .bLeft { width: 212px; height: …

141 html css html-table background-image

13

จับคู่กล่องอินพุตว่างโดยใช้ CSS

ฉันจะใช้สไตล์กับกล่องใส่ข้อมูลที่ว่างได้อย่างไร หากผู้ใช้พิมพ์บางอย่างในฟิลด์อินพุตสไตล์นั้นไม่ควรใช้อีกต่อไป เป็นไปได้ใน CSS? ฉันลองสิ่งนี้: input[value=""]

141 css input css-selectors

4

Media Queries - ในระหว่างความกว้างสอง

ฉันพยายามใช้คำสั่งสื่อ CSS3 เพื่อสร้างคลาสที่ปรากฏเฉพาะเมื่อความกว้างมากกว่า 400px และน้อยกว่า 900px ฉันรู้ว่านี่อาจจะง่ายมากและฉันก็ขาดอะไรที่ชัดเจน แต่ฉันไม่สามารถเข้าใจได้ สิ่งที่ฉันได้มาคือโค้ดด้านล่างขอขอบคุณสำหรับความช่วยเหลือ @media (max-width:400px) and (min-width:900px) { .class { display: none; } }

141 css media-queries

6

ระยะขอบขณะพิมพ์หน้า html

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

141 html css printing stylesheet

9

ใช้ CSS: ก่อนและ: หลังจากองค์ประกอบหลอกด้วย CSS แบบอินไลน์?

ฉันสร้างลายเซ็นอีเมล HTML ด้วย CSS แบบอินไลน์ (เช่น CSS ในstyleคุณลักษณะ) และฉันอยากรู้ว่ามันเป็นไปได้ที่จะใช้:beforeและ:afterองค์ประกอบหลอก ถ้าเป็นเช่นนั้นฉันจะใช้สิ่งนี้กับอินไลน์ CSS ได้อย่างไร td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; }

141 html css css-selectors pseudo-element inline-styles

6

CSS - วิธีจัดรูปแบบเลเบลปุ่มแบบเรดิโอที่เลือก?

ฉันต้องการเพิ่มสไตล์ให้กับป้ายกำกับที่เลือกของปุ่มตัวเลือก: HTML: <div class="radio-toolbar"> <label><input type="radio" value="all" checked>All</label> <label><input type="radio" value="false">Open</label> <label><input type="radio" value="true">Archived</label> </div> CSS .radio-toolbar input[type="radio"] {display:none;} .radio-toolbar label { background:Red; border:1px solid green; padding:2px 10px; } .radio-toolbar label + input[type="radio"]:checked { background:pink !important; } ความคิดใดที่ฉันทำผิด

141 html css

13

วิธีการลบ Outline Border จากปุ่ม Input

เมื่อคลิกที่อื่นเส้นขอบจะหายไปพยายามไม่โฟกัส แต่ไม่ได้ช่วยทำอย่างไรให้เส้นขอบปุ่มน่าเกลียดหายไปเมื่อคลิก? input[type="button"] { width: 120px; height: 60px; margin-left: 35px; display: block; background-color: gray; color: white; border: none; } <input type="button" value="Example Button"> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด

141 css button

7

ตัวแปรเนทีฟ CSS ไม่ทำงานในการสืบค้นสื่อ

ฉันพยายามใช้ตัวแปร CSS ในการสืบค้นสื่อ แต่ไม่ได้ผล :root { --mobile-breakpoint: 642px; } @media (max-width: var(--mobile-breakpoint)) { }

141 css media-queries css-variables

12

มีวิธีทำให้ DIV ไม่สามารถเลือกได้หรือไม่?

นี่คือคำถาม CSS ที่น่าสนใจสำหรับคุณ! ฉันมี textarea ที่มีพื้นหลังโปร่งใสซ้อนทับข้อความบางส่วนที่ฉันต้องการใช้เป็นลายน้ำ ข้อความมีขนาดใหญ่และใช้พื้นที่ส่วนใหญ่ของ textarea มันดูดีปัญหาคือเมื่อผู้ใช้คลิกใน textarea บางครั้งมันก็เลือกข้อความลายน้ำแทน ฉันต้องการให้ข้อความลายน้ำไม่สามารถเลือกได้ ฉันคาดหวังว่าบางสิ่งที่ต่ำกว่าในดัชนี z มันจะไม่สามารถเลือกได้ แต่เบราว์เซอร์ดูเหมือนจะไม่สนใจเลเยอร์ z-index เมื่อเลือกรายการ มีกลอุบายหรือวิธีที่จะทำให้มันเป็น DIV นี้หรือไม่?

140 css

6

SPAN เทียบกับ DIV (บล็อกอินไลน์)

มีเหตุผลใดที่จะใช้<div style="display:inline-block">แทน<span>เค้าโครงหน้าเว็บ? ฉันสามารถวางเนื้อหาซ้อนกันในช่วงได้หรือไม่ สิ่งที่ถูกต้องและสิ่งที่ไม่? คุณสามารถใช้สิ่งนี้เพื่อสร้างตาราง 3x2 เหมือนเลย์เอาต์ได้หรือไม่ <div> <span> content1(divs,p, spans, etc) </span> <span> content2(divs,p, spans, etc) </span> <span> content3(divs,p, spans, etc) </span> </div> <div> <span> content4(divs,p, spans, etc) </span> <span> content5(divs,p, spans, etc) </span> <span> content6(divs,p, spans, etc) </span> </div>

140 css html

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