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

ฉันเป็น div และต้องการให้มันอยู่กึ่งกลางแนวนอน - แม้ว่าฉันจะให้มันmargin:0 auto;มันไม่ได้อยู่กึ่งกลาง ... .container { position: absolute; top: 15px; z-index: 2; width:40%; max-width: 960px; min-width: 600px; height: 60px; overflow: hidden; background: #fff; margin:0 auto; }

177 css  html  center  absolute 

ฉันต้องการที่จะควบคุมเท่าใดพื้นที่แนวกระสุนผลักดันให้มัน<li>ไปทางขวาในหรือ<ol><ul> นั่นคือแทนที่จะมีเสมอ * Some list text goes here. ฉันต้องการที่จะเปลี่ยนเป็น * Some list text goes here. หรือ *Some list text goes here. ฉันมองไปรอบ ๆ แต่สามารถหาคำแนะนำในการขยับบล็อกทั้งซ้ายหรือขวาตัวอย่างเช่นhttp://www.alistapart.com/articles/taminglists/

177 html  css  html-lists 

มีโซลูชันข้ามเบราว์เซอร์เพื่อสร้างการเปลี่ยนสไลด์ในโดยใช้ CSS เท่านั้นไม่มีจาวาสคริปต์หรือไม่ ด้านล่างเป็นตัวอย่างของเนื้อหา HTML: <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

ฉันต้องการทำให้แถบนำทางติดด้านบนเมื่อฉันเลื่อนไปที่มัน แต่มันไม่ทำงานและฉันก็ไม่รู้ว่าทำไม หากคุณสามารถช่วยได้นี่คือ HTML และ CSS code ของฉัน: .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } …

177 html  css  css-position 

ฉันใช้สร้างปฏิกิริยาแอปejectและไม่ต้องการที่จะ ไม่ชัดเจนว่าที่ใดที่ฟอนต์ที่นำเข้าผ่าน @ font-face และโหลดแบบโลคัลควรดำเนินการ คือฉันกำลังโหลด @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } ข้อเสนอแนะใด ๆ - แก้ไข รวมถึงส่วนสำคัญที่ Dan อ้างถึงในคำตอบของเขา ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 …

177 css  reactjs  fonts  webpack  create-react-app 

ฉันใหม่ที่นี่ที่ บริษัท นี้และเรามีผลิตภัณฑ์ที่ใช้ไมล์ css ฉันพยายามที่จะทำให้สไตล์พิมพ์สำหรับ app ของเรา แต่ฉันมีปัญหาเกี่ยวกับในbackground-color@media print @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } ทุกอย่างใช้งานได้ฉันสามารถแก้ไขเส้นขอบและสิ่งเหล่านี้ แต่background-colorจะไม่ผ่านในการพิมพ์ ตอนนี้ฉันเข้าใจแล้วว่าคุณอาจไม่สามารถตอบคำถามของฉันได้หากไม่มีรายละเอียดเพิ่มเติม ฉันแค่อยากรู้ว่าใครเคยมีปัญหานี้หรืออะไรทำนองนี้มาก่อน

176 css  media-queries 

ขณะนี้ฉันกำลังทำงานในโครงการที่ฉันไม่สามารถควบคุม HTML ที่ฉันใช้สไตล์ CSS ได้ และ HTML นั้นไม่มีป้ายกำกับที่ดีมากในแง่ที่ว่ามีการประกาศ ID และคลาสไม่เพียงพอที่จะแยกความแตกต่างระหว่างองค์ประกอบ ดังนั้นฉันกำลังมองหาวิธีที่ฉันสามารถใช้สไตล์กับวัตถุที่ไม่มีแอตทริบิวต์ id หรือคลาส บางครั้งไอเท็มฟอร์มมีแอตทริบิวต์ "name" หรือ "value": <input type="submit" value="Go" name="goButton"> มีวิธีที่ฉันสามารถใช้สไตล์ตาม name = "goButton" หรือไม่? แล้ว "คุณค่า" ล่ะ? มันเป็นสิ่งที่ยากที่จะค้นพบเพราะการค้นหาของ Google จะค้นหาอินสแตนซ์ทุกประเภทที่คำกว้าง ๆ เช่น "ชื่อ" และ "ค่า" จะปรากฏในหน้าเว็บ ฉันสงสัยว่าคำตอบคือไม่ ... แต่บางทีใครบางคนอาจมีแฮ็คที่ฉลาด? คำแนะนำใด ๆ ที่จะได้รับการชื่นชมอย่างมาก

176 html  css  css-selectors 

<td class="style1" align='center' height='35'> <div style='overflow: hidden; width: 230px;'> <a class='link' herf='' onclick='topic(<?=$key;?>)'> <span id='name<?=$key;?>'><?=$name;?></span> </a> </div> </td> นี่คือสคริปต์ CSS ของฉัน .style1 { background-image: url('http://localhost/msite/images/12.PNG'); background-repeat: no-repeat; background-position: left center; } ฉันต้องการยืดเซลล์background-imageให้ทั่ว<td>

176 html  css  background 

พิจารณาตัวอย่างต่อไปนี้: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply dummy text of the …

176 css  internet-explorer  flexbox  internet-explorer-11 

ฉันกำลังพยายามตั้งค่า<div>ความสูงเป็นเปอร์เซ็นต์ที่แน่นอนใน CSS แต่มันก็ยังคงขนาดเดียวกันกับเนื้อหาที่อยู่ภายใน อย่างไรก็ตามเมื่อฉันลบ HTML 5 <!DOCTYTPE html>มันก็ใช้งานได้การ<div>ใช้ทั้งหน้าตามต้องการ ฉันต้องการให้หน้าตรวจสอบความถูกต้องแล้วฉันควรทำอย่างไร ฉันมี CSS นี้ใน<div>ซึ่งมี ID ของpage: #page { padding: 10px; background-color: white; height: 90% !important; }

176 html  css  height 

ฉันมีชุดขององค์ประกอบบล็อกในหน้า พวกเขาทั้งหมดมี CSS CSS white-space, overflow, text-overflow set เพื่อให้ข้อความ overflowing ถูกตัดแต่งและใช้จุดไข่ปลา อย่างไรก็ตามไม่ใช่องค์ประกอบทั้งหมดที่ล้น มีอยู่แล้วฉันสามารถใช้จาวาสคริปต์เพื่อตรวจสอบองค์ประกอบที่ล้น? ขอบคุณ เพิ่มแล้ว: ตัวอย่างโครงสร้าง HTML ที่ฉันทำงานด้วย <td><span>Normal text</span></td> <td><span>Long text that will be trimmed text</span></td> องค์ประกอบ SPAN จะพอดีกับเซลล์เสมอโดยจะมีการใช้กฎวงรี ฉันต้องการตรวจสอบเมื่อจุดไข่ปลาถูกนำไปใช้กับเนื้อหาข้อความของ SPAN

176 javascript  html  css  ellipsis 

<div class="commentList"> <article class="comment " id="com21"></article> <article class="comment " id="com20"></article> <article class="comment " id="com19"></article> <div class="something"> hello </div> </div> ฉันต้องการที่จะเลือก#com19? .comment { width:470px; border-bottom:1px dotted #f0f0f0; margin-bottom:10px; } .comment:last-child { border-bottom:none; margin-bottom:0; } ที่ไม่ทำงานตราบใดที่ฉันมีอีกdiv.somethingเป็นลูกคนสุดท้ายที่เกิดขึ้นจริงใน commentList มันเป็นไปได้ที่จะใช้ตัวเลือกสุดท้ายเด็กในกรณีนี้เพื่อเลือกปรากฏตัวครั้งสุดท้ายของarticle.comment? jsFiddle

176 html  css  css-selectors 

ฉันต้องการรวม:afterกับ:hoverใน CSS (หรือตัวเลือกหลอกอื่น ๆ ) ฉันเป็นพื้นมีรายชื่อและรายการที่มีระดับมีรูปร่างลูกศรประยุกต์ใช้selected :afterฉันต้องการเหมือนกันที่จะเป็นจริงสำหรับวัตถุที่ถูกโฉบไป แต่ไม่สามารถทำให้มันทำงานได้ นี่คือรหัส #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0; border-top: 10px solid transparent; border-bottom: …

176 css  css-selectors  pseudo-element 

สิ่งนี้ควรเรียบง่าย แต่ฉันมีปัญหาในการค้นหาข้อความค้นหา สมมติว่าฉันมีสิ่งนี้: <div class="a c">Foo</div> <div class="b c">Bar</div> ใน CSS ฉันจะสร้างตัวเลือกที่ตรงกับสิ่งที่ตรงกับ "(.a หรือ .b) และ. c" ได้อย่างไร ฉันรู้ว่าฉันสามารถทำสิ่งนี้: .a.c,.b.c { /* CSS stuff */ } แต่สมมติว่าฉันจะต้องใช้ตรรกะประเภทนี้มาก ๆ ด้วยความหลากหลายของการรวมกันทางตรรกะจะมีไวยากรณ์ที่ดีกว่าหรือไม่?

176 html  css  css-selectors 

ฉันต้องการใช้กฎ CSS กับองค์ประกอบใด ๆ ที่มีหนึ่งในชั้นเรียนตรงกับคำนำหน้าระบุ เช่นฉันต้องการกฎที่จะใช้กับ div ที่มีคลาสที่ขึ้นต้นด้วยstatus-(A และ C แต่ไม่ใช่ B ในตัวอย่างต่อไปนี้): <div id='A' class='foo-class status-important bar-class'></div> <div id='B' class='foo-class bar-class'></div> <div id='C' class='foo-class status-low-priority bar-class'></div> การรวมกันของ: div[class|=status]และdiv[class~=status-] มันสามารถทำได้ภายใต้ CSS 2.1 หรือไม่ มันสามารถใช้งานได้กับสเปค CSS หรือไม่? หมายเหตุ: ฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อเลียนแบบสิ่งนั้นได้

175 css  css-selectors