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

12

การใช้ระยะขอบ: อัตโนมัติเพื่อจัดแนว div ในแนวตั้ง

ดังนั้นผมจึงรู้ว่าเราสามารถตั้งศูนย์กลาง div margin:0 auto;แนวนอนถ้าเราใช้ ควรmargin:auto auto;ทำงานวิธีที่ผมคิดว่ามันควรจะทำงาน? จัดกึ่งกลางในแนวตั้งด้วยหรือไม่? ทำไมไม่vertical-align:middle;ทำงานทั้งสองอย่าง? .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; } <div class="black"> <div class="message"> This is a popup message. </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด JSFiddle

114 html css centering

12

วิธีตั้งค่าความสูงของร่างกายด้วยการเลื่อนแบบล้น

ฉันกำลังประสบปัญหาในขณะที่ตั้งค่าความสูงความกว้างตัวถังล้น <style> tbody{ height:50px;display:block;overflow:scroll } </style> <h3>Table B</h3> <table style="border: 1px solid red;width:300px;display:block"> <thead> <tr> <td>Name</td> <td>phone</td> </tr> </thead> <tbody style='height:50px;display:block;overflow:scroll'> <tr> <td>AAAA</td> <td>323232</td> </tr> <tr> <td>BBBBB</td> <td>323232</td> </tr> <tr> <td>CCCCC</td> <td>3435656</td> </tr> </tbody> </table> เยี่ยมชมซอของฉันที่นี่ ฉันต้องการตาราง B เหมือนตาราง A ที่มีการเลื่อนมากเกินไป ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม. ขอบคุณมากเอ็ม

114 html css

8

CSS“ และ” และ“ หรือ”

ฉันมีปัญหาค่อนข้างใหญ่เพราะฉันต้องการกายวิภาคศาสตร์จากการจัดรูปแบบอินพุตบางประเภท ฉันมีสิ่งที่ชอบ: .registration_form_right input:not([type="radio") { //Nah. } แต่ฉันไม่ต้องการจัดรูปแบบช่องทำเครื่องหมายด้วย ฉันพยายามแล้ว: .registration_form_right input:not([type="radio" && type="checkbox"]) .registration_form_right input:not([type="radio" && "checkbox"]) .registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"]) ใช้&&อย่างไร? และฉันจะต้องใช้||เร็ว ๆ นี้และฉันคิดว่าการใช้งานจะเหมือนเดิม ปรับปรุง: ผมก็ยังไม่ทราบวิธีการใช้||และ&&ถูกต้อง ฉันไม่พบสิ่งใดในเอกสาร W3

114 css css-selectors conditional-operator

2

textarea - ปิดการใช้งานการปรับขนาดบน x หรือ y?

ฉันรู้ว่าเป็นไปได้ที่จะปิดใช้งานการปรับขนาดของ a textareaโดยใช้: textarea { resize: none; } แต่เป็นไปได้ไหมที่จะปิดใช้งาน x หรือ y? แทนที่จะเป็นทั้งสองอย่าง

114 css resize textarea

9

วิธีซ่อนแถบนำทาง Bootstrap 4 ที่ยุบได้เมื่อคลิก

ฉันได้สร้างแถบนำทางที่ยุบได้นี้โดยใช้ Bootstrap 4 ซึ่งใช้งานได้ดี แต่ฉันต้องการปิดเมื่อผู้ใช้คลิกที่ลิงค์ วิธีใดในการทำเช่นนี้ ขอบคุณ html navbar: <nav class="navbar navbar-toggleable-md fixed-top"> <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="container"> <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a> <div class="collapse navbar-collapse" id="navbarDiv"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home <span …

114 html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

2

ทำให้รายการดิ้นลอยไปทางขวา

ฉันมี <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> ผู้ปกครองมี .parent { display: flex; } สำหรับลูกคนแรกของฉันฉันต้องการเพียงแค่ลอยสิ่งของไปทางขวา และ div อื่น ๆ ของฉันเพื่อทำตามกฎการยืดหยุ่นที่กำหนดโดยผู้ปกครอง สิ่งนี้เป็นไปได้หรือไม่? ถ้าไม่ฉันจะทำfloat: rightunder flex ได้อย่างไร?

114 html css flexbox

3

จะระบุลำดับของคลาส CSS ได้อย่างไร?

ฉันสับสนเล็กน้อยเกี่ยวกับ CSS และclassแอตทริบิวต์ ฉันคิดเสมอว่าลำดับที่ฉันระบุหลายคลาสในค่าแอตทริบิวต์มีความหมาย คลาสในภายหลังสามารถ / ควรเขียนทับคำจำกัดความของก่อนหน้านี้ แต่ดูเหมือนจะไม่ได้ผล นี่คือตัวอย่าง: <html> <head> <style type="text/css"> .extra { color: #00529B; border:1px solid #00529B; /* Blue */ background-color: #BDE5F8; } .basic { border: 1px solid #ABABAB; } </style> </head> <body> <input type="text" value="basic" class="basic"/> <input type="text" value="extra" class="extra"/> <input type="text" value="basic extra" class="basic extra"/> …

113 html css

8

ปิดใช้งานแถบเลื่อนแนวตั้งใน div ล้น: อัตโนมัติ

เป็นไปได้ไหมที่จะอนุญาตเฉพาะแถบเลื่อนแนวนอนเมื่อใช้โอเวอร์โฟลว์: อัตโนมัติ (หรือเลื่อน)

113 html css scroll scrollbar

7

ฉันจะลบเงาบนองค์ประกอบที่เลือกใน Safari บน Mac ได้อย่างไร

บน Mac และอุปกรณ์ iOS ใน Safari <select>องค์ประกอบที่มีสีพื้นหลังจะทำให้เกิดเงาขึ้นเอง สิ่งนี้ดูเหมือนจะไม่เกิดขึ้นในระบบปฏิบัติการอื่น ตัวอย่างเช่นฉันมีองค์ประกอบเลือกที่มีคุณสมบัติลักษณะเหล่านี้: select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 3px 6px; margin: 10px 0 7px; width: 250px; background-color: #BD2786; color: white; letter-spacing: -.04em; font-weight: bold; border: 0; } และองค์ประกอบของฉันมีสีพื้นหลังที่ฉันต้องการ แต่ความเงายังคงอยู่ที่นั่น ใครรู้วิธีทำให้เป็นสีแบน ๆ

113 css macos safari drop-down-menu background-color

4

Bootstrap 4: เมนูแบบเลื่อนลงจะปิดทางด้านขวาของหน้าจอ

ฉันไม่สามารถดึงรายการแบบเลื่อนลงเพื่อไม่ให้ออกจากหน้าได้ ฉันลองสองสามอย่างจาก BS3 แต่ดูเหมือนจะไม่ได้ผล ฉันไม่แน่ใจว่าเป็นเพราะไฟล์ml-auto. (ละเว้นคำสั่ง if-else) นี่คือCodePen : <div class="container-fluid"> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;"> <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- <button class="navbar-toggler navbar-toggler-right" type="button" …

113 twitter-bootstrap css bootstrap-4

9

ลบเส้นขอบออกจากปุ่ม

ฉันพยายามสร้างปุ่มและแทรกรูปภาพของตัวเองแทนรูปภาพปุ่มมาตรฐาน อย่างไรก็ตามเส้นขอบสีเทาจากปุ่มมาตรฐานยังคงปรากฏอยู่ด้านนอกของภาพปุ่มสีดำของฉัน ไม่มีใครรู้วิธีลบเส้นขอบสีเทานี้ออกจากปุ่มดังนั้นมันจึงเป็นเพียงภาพเท่านั้นเอง? ขอบคุณ.

113 html css button

2

ฉันจะใช้สไตล์กับลูก ๆ ขององค์ประกอบทั้งหมดได้อย่างไร

class='myTestClass'ฉันมีองค์ประกอบที่มี ฉันจะใช้สไตล์ css กับลูก ๆ ทั้งหมดขององค์ประกอบนี้ได้อย่างไร ฉันต้องการใช้สไตล์นี้กับองค์ประกอบที่เด็ก ๆ เท่านั้น ไม่ใช่ลูกหลานของมัน ฉันสามารถใช้ .myTestClass > div { margin: 0 20px; } ซึ่งเหมาะกับdivเด็ก ๆทุกคน แต่ฉันต้องการวิธีแก้ปัญหาที่เหมาะกับเด็กทุกคน ฉันคิดว่าฉันสามารถใช้ได้*แต่ .myTestClass > * { margin: 0 20px; } ไม่ทำงาน, ไม่เป็นผล. แก้ไข .myTestClass > *เลือกไม่ใช้กฎใน Firefox 26 และไม่มีกฎอื่น ๆ สำหรับอัตรากำไรตามวางเพลิง และจะได้ผลถ้าฉันแทนที่*ด้วยdiv.

113 css css-selectors

6

ความกว้างของฉลาก css ไม่มีผล

ฉันมีแบบฟอร์มทั่วไปซึ่งฉันต้องการจัดรูปแบบเพื่อจัดแนวป้ายกำกับและช่องป้อนข้อมูล ด้วยเหตุผลบางประการเมื่อฉันให้ความกว้างกับตัวเลือกฉลากไม่มีอะไรเกิดขึ้น: HTML: <form id="report-upload-form" method="POST" action="" enctype="multipart/form-data"> <p> <label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p> <p> <label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p> <p> <label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"> </p> </form> CSS: #report-upload-form { background-color: #316091; color: #ddeff1; font-weight:bold; margin: 23px auto 0 auto; border-radius:10px; width: …

112 html css label

8

ความทึบของพื้นหลังของ div โดยไม่ส่งผลต่อองค์ประกอบที่มีอยู่ใน IE 8?

ฉันต้องการตั้งค่าความทึบของพื้นหลังของ div โดยไม่ส่งผลกระทบต่อองค์ประกอบที่มีอยู่ใน IE 8 มีวิธีแก้ปัญหาใด ๆ และไม่ตอบโจทย์ในการตั้งค่ารูปภาพ 1 X 1 .png และตั้งค่าความทึบของรูปภาพนั้นเนื่องจากฉันใช้ความทึบแบบไดนามิกและผู้ดูแลระบบสีสามารถเปลี่ยนแปลงได้ ที่ ฉันใช้มัน แต่ไม่ทำงานใน IE 8 #alpha { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } และ rgba(0,0,0,0.3) ด้วย

112 css internet-explorer-8 opacity

5

ตัวเลือกเด็กทันทีใน LESS

จะมีการให้ LESS ใช้ตัวเลือกลูกทันที (>) ในผลลัพธ์หรือไม่? ในสไตล์ของฉันฉันต้องการเขียนสิ่งที่ชอบ: .panel { ... > .control { ... } } และมี LESS สร้างสิ่งที่ต้องการ: .panel > .control { ... }

112 css css-selectors less

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