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

10

ฉันใช้ twitter bootstrap สำหรับโปรเจ็กต์ที่ฉันกำลังทำอยู่ ฉันมีหน้าต่างโมดอลที่มีรูปแบบค่อนข้างยาวกว่าและฉันไม่ชอบเมื่อหน้าต่างมีขนาดเล็กเกินไปโมดอลจะไม่เลื่อน (ถ้าเพิ่งหายไปจากหน้าของฉันซึ่งไม่สามารถเลื่อนได้) ในการแก้ไขปัญหานี้ฉันใช้ css ต่อไปนี้ .modal { overflow-y:auto; max-height:90%; margin-top:-45%; } วิธีนี้ใช้งานได้ตามที่ฉันต้องการใน Chrome (นั่นคือแบบฟอร์มเป็นขนาดเต็มเมื่อหน้าต่างมีขนาดใหญ่พอ แต่เมื่อหน้าต่างหดตัวโมดอลจะหดตัวและเลื่อนได้) ปัญหาคือใน IE โมดอลปิดหน้าจอ ใครมีวิธีแก้ปัญหาที่ดีกว่านี้บ้าง? ตัวอย่างของฉันสามารถพบได้ที่ tinyhousemap.com (คลิก 'เพิ่มรายการลงในแผนที่' ในหน้าต่างนำทางเพื่อให้โมดอลปรากฏขึ้น) ขอบคุณ

84 css twitter-bootstrap

11

การวางเมาส์เหนือ CSS เทียบกับการวางเมาส์บน JavaScript [ปิด]

ปิด . คำถามนี้เป็นคำถามความคิดเห็นตาม ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบได้ด้วยข้อเท็จจริงและการอ้างอิงโดยแก้ไขโพสต์นี้ ปิดให้บริการใน2 ปีที่ผ่านมา ปรับปรุงคำถามนี้ มีหลายครั้งที่ฉันมีตัวเลือกระหว่างการใช้องค์ประกอบ CSS: hover หรือ JavaScript onmouseover เพื่อควบคุมลักษณะที่ปรากฏขององค์ประกอบ html บนหน้า พิจารณาสถานการณ์ต่อไปนี้ที่ div ห่ออินพุต <div> <input id="input"> </div> ฉันต้องการให้อินพุตเปลี่ยนสีพื้นหลังเมื่อเคอร์เซอร์ของเมาส์วางเมาส์เหนือ div แนวทาง CSS คือ <style> input {background-color:White;} div:hover input {background-color:Blue;} </style> <div><input></div> วิธีการของ JavaScript คือ <div onmouseover="document.getElementById('input').style.backgroundColor='Blue';"> <input id="input"> </div> แต่ละแนวทางมีข้อดีข้อเสียอย่างไร? แนวทาง CSS ทำงานได้ดีกับเว็บเบราว์เซอร์ส่วนใหญ่หรือไม่? …

84 javascript css

4

จัด DIV ให้อยู่กึ่งกลางโดยใช้ CSS

ฉันอยู่ตรงกลาง DIV ในอีก DIV โดยใช้ flexbox นึกถึงหน้าต่างข้อความที่ปรากฏขึ้นตรงกลางหน้าจอเมื่อจำเป็น มันใช้งานได้ดี แต่มันจะดูดีขึ้นมากถ้าพื้นที่ด้านบนและด้านล่างของกล่องโต้ตอบไม่เท่ากันโดยมี 40% ของพื้นที่ที่เหลืออยู่ด้านบนและด้านล่างของกล่องโต้ตอบ 60% มันซับซ้อนมากเนื่องจากความสูงของกล่องโต้ตอบจะแตกต่างกันไปตามจำนวนข้อความภายใน ตัวอย่างเช่นหากความสูงของเบราว์เซอร์คือ 1,000 px และความสูงของหน้าต่างข้อความโต้ตอบคือ 400 px ฉันต้องการพื้นที่แนวตั้งที่เหลือ (600 px) เป็น 240 px ด้านบนและด้านล่างกล่องโต้ตอบ 360 px ฉันสามารถใช้ Javascript ได้ แต่ฉันอยากรู้ว่า CSS มีวิธีที่ชาญฉลาดหรือไม่ ฉันพยายามเพิ่มระยะขอบด้านล่างลงใน #dialogBox DIV แต่ไม่ได้ผลเมื่อความสูงของกล่องโต้ตอบใกล้กับความสูงของเบราว์เซอร์ #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox …

23 html css flexbox centering

10

วิธีลบช่องว่างแปลก ๆ ระหว่างสาม divs ที่มีสีพื้นหลังเหมือนกันได้อย่างไร

ฉันกำลังดิ้นรนกับปัญหานี้มาระยะหนึ่งแล้ว ปัญหานี้สามารถเห็นได้บนอุปกรณ์พกพา (Android และ iOS) อุปกรณ์บางอย่างอาจต้องมีการซูมเข้าเล็กน้อย บนพีซีฉันสามารถสร้างข้อผิดพลาดนี้ซ้ำบนเบราว์เซอร์ Chrome เมื่อสลับไปยังโหมดมือถือ ด้านล่างเป็นรหัสที่ใช้สร้างข้อผิดพลาดซ้ำ: <!DOCTYPE html> <html lang="en"> <head> <style> .top { height: 100px; background-color: #553213; } .middle { height: 100px; background-color: #553213; } .bottom { height: 100px; background-color: #553213; } </style> </head> <body> <div style="width:300px; height: 300px"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> …

23 html css

7

ลบสีขอบที่กำหนดไว้ก่อนหน้า

20 javascript html css

8

ฉันจะพิสูจน์ได้อย่างไรว่าหน้า HTML สองหน้ามีหน้าตาเหมือนกัน

เช่นฉันมีสิ่งนี้: <pre> sun<br/> &nbsp;&nbsp;&nbsp;&nbsp;mercury <br/> &nbsp;&nbsp;&nbsp;&nbsp;venus <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/> &nbsp;&nbsp;&nbsp;&nbsp;saturn <br/> </pre> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล และนี่: <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> <br/> <div style="text-indent: 12ch">jupiter</div> <br/> <div style="text-indent: 4ch">saturn</div> <br/> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล …

19 html css acid3

5

ไม่อนุญาตให้เลื่อนแนวนอนเมื่อเลื่อนแนวตั้ง (และกลับกัน)

ผมมีรายการที่มีoverflow-xและกำหนดให้overflow-y นอกจากนี้ผมได้ตั้งค่าเลื่อนโมเมนตัมเพื่อเลื่อนสัมผัสการทำงานมีความสุขในมือถือใช้autowebkit-overflow-scrolling: true อย่างไรก็ตามปัญหาคือฉันไม่สามารถหาวิธีปิดการใช้งานการเลื่อนแนวนอนเมื่อเลื่อนในแนวตั้ง มันนำไปสู่ประสบการณ์การใช้งานที่ไม่ดีนักเนื่องจากการปัดไปทางซ้ายบนหรือขวาบนจะทำให้ตารางเลื่อนตามแนวทแยงมุม เมื่อผู้ใช้เลื่อนแนวตั้งฉันไม่ต้องการเลื่อนในแนวนอนอย่างแน่นอนจนกว่าผู้ใช้จะหยุดเลื่อนแนวตั้ง ฉันได้ลองทำสิ่งต่อไปนี้แล้ว: JS: offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if …

17 javascript html css angular ionic-framework

10

สร้าง divs ที่มีขนาดเท่ากันโดยล้อมรอบ

ฉันกำลังพยายามสร้างระบบเมนูที่มีรูปภาพและข้อความด้านบนและด้านล่าง ข้อมูลเป็นแบบไดนามิก ฉันต้องการให้ระบบเมนูปรากฏขึ้นเพื่อให้แต่ละภาพมีระยะทางเท่ากันจากภาพอื่น ๆ เพื่อให้พวกเขาเข้าแถวในตารางภาพทั้งแนวนอนและแนวตั้ง ปัญหาคือข้อความ หากข้อความยาวเกินกว่าที่รูปภาพแสดง div จะขยายใหญ่ขึ้น อย่างไรก็ตามมันจะสร้างช่องว่างที่ดูแปลก ๆ เนื่องจากรูปภาพไม่ได้เว้นระยะเท่ากัน ในการหลีกเลี่ยงปัญหานี้ฉันคิดว่าวิธีที่ดีที่สุดคือการให้กองหน้าที่อื่น ๆ ใช้ขนาดของแผนกที่ใหญ่ขึ้น อย่างไรก็ตามฉันไม่แน่ใจว่าจะทำสิ่งนี้อย่างไร ฉันลองด้วย flexbox โดยใช้flex-wrapคุณสมบัติ แม้ว่ามันจะถูกห่อหุ้มอย่างดี แต่ฉันก็ไม่สามารถหาวิธีที่จะทำให้แต่ละภาพเรียงกันในระยะทางเท่ากัน ฉันจะทำอย่างไรเพื่อให้บรรลุเป้าหมายนี้ รหัสของฉันเป็นดังนี้: #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section …

17 html css flexbox

2

วิธีสร้างวงกลมที่มีระยะห่างสม่ำเสมอ?

ฉันต้องการสร้างวงกลมจุดด้วย CSS และสร้างด้วยกระบวนการต่อไปนี้ แม้ว่ากระบวนการนี้จะแสดงวงกลมประ แต่ช่องว่างระหว่างจุดสิ้นสุดและจุดเริ่มต้นของเส้นประนั้นแคบลงและช่องว่างไม่สม่ำเสมอ .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มีวิธีทำชุดช่องว่างหรือไม่? เราสามารถควบคุมช่องว่างระหว่างเส้นประหรือไม่ หากไม่สามารถทำได้ด้วย CSS เพียงอย่างเดียวเรากำลังพิจารณาใช้ JavaScript หรือสิ่งที่คล้ายกัน

16 javascript html css

8

วิธีการเลือกหลายเซลล์โดยใช้ ctrl + คลิก

ฉันมีโต๊ะที่มีตัวเลข เมื่อฉันคลิกที่เซลล์ในตารางมันจะสลับสถานะที่ใช้งานอยู่ ฉันต้องการเลือกหนึ่งเซลล์แล้วกด crtl แล้วเลือกอีกเซลล์หนึ่งเนื่องจากเซลล์ผลลัพธ์ระหว่างเซลล์แรกและเซลล์ที่สองจะกลายเป็นใช้งานอยู่ วิธีการใช้งาน codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else …

16 javascript html css

1

ทำไม getComputedStyle () ในการทดสอบ JEST ส่งคืนผลลัพธ์ที่แตกต่างไปยังสไตล์ที่คำนวณใน Chrome / Firefox DevTools

ผมเคยเขียนปุ่มที่กำหนดเอง ( MyStyledButton) ตามวัสดุ UI Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button …

16 javascript css reactjs jestjs enzyme

4

ฉันจะสร้างเส้นโค้งในภาพเคลื่อนไหว CSS“ รถไฟเหาะ” ได้อย่างไร?

ฉันกำลังพยายามสร้างภาพเคลื่อนไหวสไตล์รถไฟเหาะด้วย CSS ฉันต้องการทราบวิธีโค้ง "รถไฟเหาะ" เมื่ออยู่ในระยะวนรอบ ฉันกำลังค้นหาโซลูชัน CSS ทั้งหมด แต่ถ้ามีความต้องการ JavaScript เล็กน้อยฉันก็ใช้ได้ รหัสของฉัน: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; } #coaster { width: 100px; height: 10px; background: lightblue; position: absolute; bottom: 0; left: 1px; right: 1px; margin: 0 auto; } @keyframes …

15 html css css-animations css-transforms

6

การวางตำแหน่งเนื้อหาที่เลื่อนได้ภายใต้เมนูการนำทาง flexbox คงที่

ฉันมีดังต่อไปนี้ข้อมูลโค้ด (จำเป็นที่จะต้องดูในโหมดเต็มหน้าจอ) ที่ฉันพยายามที่จะวาง<main>องค์ประกอบโดยตรงภายใต้<header>องค์ประกอบ ฉัน<header>อยู่ในตำแหน่งคงที่เพราะฉันต้องการให้อยู่ด้านบนของหน้าจอในขณะที่ผู้ใช้เลื่อนดูเนื้อหาใน<main>องค์ประกอบ ฉันได้ลองทุกอย่างที่ฉันรู้แล้ว แต่สิ่งที่ดีที่สุดที่ฉันสามารถทำได้คือการ<header>วางองค์ประกอบไว้บน<main>องค์ประกอบซึ่งตัดเนื้อหาอันใหญ่ออกไป วิธีการแก้ปัญหาที่เป็นไปได้ใกล้เคียงที่สุดที่ฉันได้มาด้วยการวางด้านบน padding guesstimated ในองค์ประกอบจึงจะล้าง<main> <header>อย่างไรก็ตามวิธีนี้ไม่ได้คำนึงถึงขนาดหน้าจอที่หลากหลายเนื่องจากฉันใช้การปรับขนาด rem แทน px แนวคิดการเติมด้านบนแย่ลงมากเมื่อวางองค์ประกอบหลายอย่างภายในความสูง<header>ที่สัมพันธ์กันหรือใช้เปอร์เซ็นต์ความสูง ในขนาดหน้าจอเดียวทุกอย่างอาจเข้ากันได้อย่างสมบูรณ์แบบและขนาดหน้าจอที่แตกต่างกันเนื้อหาอาจจะถูกปิด สุดท้ายฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อตั้งค่าการเติมด้านบนแบบไดนามิก แต่ดูเหมือนจะไม่ได้ผลดีนัก สงสัยว่ามีโซลูชัน css / html แท้ ทุกคนสามารถบอกสิ่งที่ฉันหายไปที่นี่ได้ไหม วิธีการเติมเต็มด้านบนของฉันเป็นเพียงวิธีแก้ปัญหาที่ใช้การได้หรือไม่ $(document).ready(function() { $('#navToggle').click(function() { $("div#bottom-container > nav").slideToggle(); }); $(window).resize(function() { if(window.innerWidth >= "751") { $("header > div#bottom-container > nav").show(); }else { $("header > …

15 html css css-position fixed

4

วิธีการทำให้การตอบสนองของ iframe โดยไม่มีการสมมติอัตราส่วนกว้างยาว?

จะทำให้ iframe ตอบสนองได้อย่างไรโดยไม่ต้องสมมติอัตราส่วนกว้างยาว? ตัวอย่างเช่นเนื้อหาอาจมีความกว้างหรือความสูงซึ่งไม่เป็นที่รู้จักก่อนแสดงผล หมายเหตุคุณสามารถใช้ Javascript ตัวอย่าง: <div id="iframe-container"> <iframe/> </div> ปรับขนาดนี้iframe-containerเพื่อให้เนื้อหาของมันพอดีกับภายในโดยไม่มีพื้นที่เพิ่มเติมกล่าวคือมีพื้นที่ว่างเพียงพอสำหรับเนื้อหาจึงสามารถแสดงได้โดยไม่ต้องเลื่อน แต่ไม่มีพื้นที่มากเกินไป คอนเทนเนอร์ล้อม iframe อย่างสมบูรณ์ สิ่งนี้แสดงวิธีการตอบสนอง iframe โดยสมมติว่าอัตราส่วนภาพของเนื้อหาคือ 16: 9 แต่ในคำถามนี้อัตราส่วนภาพแปรผัน

14 javascript html css iframe responsive-design

8

หมายเลขแรกจะเข้าไปข้างในเมื่อพิมพ์หมายเลขสุดท้ายลงในกล่องข้อความ

เมื่อฉันพิมพ์หมายเลขสุดท้ายในที่หมายเลขแรกไปภายในtext-box(มันจะหายไป) ก็เพิ่มหนึ่งพื้นที่พิเศษ หลังจากที่ฉันคลิกด้านนอกtext-boxมันดูดีซึ่งฉันต้องการระหว่างการพิมพ์ตัวอักษรตัวสุดท้าย #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล ช่วยฉันออกจากปัญหานี้ ขอบคุณ

14 javascript jquery html css

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