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

ฉันต้องการใช้แอปแบบเต็มความสูงโดยใช้ flexbox ฉันพบสิ่งที่ฉันต้องการโดยใช้โมดูลเลย์เอาต์ flexbox เก่า ( display: box;และสิ่งอื่น ๆ ) ในลิงค์นี้: แอพCSS3 Flexbox เต็มความสูงและโอเวอร์โฟลว์ นี่เป็นวิธีแก้ปัญหาที่ถูกต้องสำหรับเบราว์เซอร์ที่รองรับคุณสมบัติ Flexbox CSS เวอร์ชันเก่าเท่านั้น หากฉันต้องการลองใช้คุณสมบัติ flexbox ที่ใหม่กว่าฉันจะลองใช้วิธีที่สองในลิงค์เดียวกับที่ระบุว่าเป็นการแฮ็ก: โดยใช้คอนเทนเนอร์กับheight: 0px;. ทำให้แสดงการเลื่อนแนวตั้ง ฉันไม่ชอบมันมากนักเพราะมันแนะนำปัญหาอื่น ๆ และเป็นวิธีแก้ปัญหามากกว่าวิธีแก้ปัญหา html, body { height: 100%; } #container { display: flex; flex-direction: column; height: 100%; } #container article { flex: 1 1 auto; overflow-y: …

107 html  css  flexbox 

คุณจะบรรลุเหตุการณ์โฮเวอร์หรือเหตุการณ์ที่ใช้งานอยู่ใน ReactJS ได้อย่างไรเมื่อคุณจัดแต่งทรงผมแบบอินไลน์ ฉันพบว่าวิธี onMouseEnter, onMouseLeave นั้นมีปัญหาดังนั้นหวังว่าจะมีวิธีอื่นในการทำเช่นนั้น โดยเฉพาะอย่างยิ่งหากคุณวางเมาส์เหนือส่วนประกอบอย่างรวดเร็วระบบจะลงทะเบียนเฉพาะเหตุการณ์ onMouseEnter เท่านั้น onMouseLeave ไม่เคยเริ่มทำงานและทำให้ไม่สามารถอัปเดตสถานะได้ ... ปล่อยให้ส่วนประกอบปรากฏราวกับว่ายังคงถูกวางเมาส์ไว้ ฉันสังเกตเห็นสิ่งเดียวกันนี้หากคุณลองเลียนแบบ css pseudo-class ": active" หากคุณคลิกเร็วจริงเฉพาะเหตุการณ์ onMouseDown เท่านั้นที่จะลงทะเบียน เหตุการณ์ onMouseUp จะถูกละเว้น ... ปล่อยให้คอมโพเนนต์ทำงานอยู่ นี่คือ JSFiddle ที่แสดงปัญหา: https://jsfiddle.net/y9swecyu/5/ วิดีโอของ JSFiddle ที่มีปัญหา: https://vid.me/ZJEO รหัส: var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: …

107 javascript  css  reactjs  mouseevent  dom-events 

เป้าหมายของฉันคือการใช้ CSS ในช่วงสุดท้ายliแต่มันไม่เป็นเช่นนั้น #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } <div id="refundReasonMenu"> <ul id="nav"> <li><a id="abc" href="#">abcde</a></li> <li><a id="def" href="#">xyz</a></li> </ul> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันจะเลือกเฉพาะลูกคนสุดท้ายได้อย่างไร?

106 css  css-selectors 

ฉันมีปัญหาแปลก ๆ เล็กน้อยที่ฉันกำลังแก้โดยใช้ a tableดูด้านล่าง โดยพื้นฐานแล้วฉันต้องการให้สอง div ใช้พื้นที่ 100% ของความกว้างที่มีอยู่ แต่ใช้พื้นที่ในแนวตั้งเท่าที่จำเป็นเท่านั้น (ซึ่งไม่ชัดเจนจากภาพ) ทั้งสองควรมีความสูงเท่ากันตลอดเวลาโดยมีเส้นคั่นระหว่างเล็กน้อยดังที่แสดง (ที่มา: pici.se ) ทั้งหมดนี้ทำได้ง่ายมากโดยใช้tableที่ฉันกำลังทำอยู่ อย่างไรก็ตามฉันไม่กระตือรือร้นในการแก้ปัญหามากนักเนื่องจากในทางความหมายนี่ไม่ใช่ตาราง

106 html  css  html-table 

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

106 css  css-frameworks 

ฉันมีโต๊ะที่มีความกว้าง 100% ถ้าผมใส่<td>s เข้าไปพวกมันจะกระจายออกโดยมีคอลัมน์ที่ยาวเท่ากัน อย่างไรก็ตามฉันต้องการให้คอลัมน์ทั้งหมดยกเว้นสุดท้ายมีความกว้างน้อยที่สุดโดยไม่ต้องตัดข้อความ สิ่งที่ฉันทำก่อนอื่นคือฉันตั้งค่าwidth="1px"ในทุกคำ<td>ยกเว้นครั้งสุดท้าย (แม้ว่าจะเลิกใช้แล้ว แต่style="width:1px"ก็ไม่มีผลใด ๆ ) ซึ่งทำงานได้ดีจนกว่าฉันจะมีข้อมูลหลายคำในคอลัมน์ ในกรณีนี้เพื่อให้ความยาวเล็กที่สุดมันจะห่อข้อความของฉัน ให้ฉันสาธิต ลองนึกภาพตารางนี้: --------------------------------------------------------------------------------- element1 | data | junk here | last column --------------------------------------------------------------------------------- elem | more data | other stuff | again, last column --------------------------------------------------------------------------------- more | of | these | rows --------------------------------------------------------------------------------- ไม่ว่าฉันจะพยายามยังไงสิ่งที่ฉันได้รับก็คือ: --------------------------------------------------------------------------------- element1 | data …

106 html  css  html-table 

ฉันพยายามให้ข้อความไปในแนวตั้งเหมือนที่เราทำได้ในตาราง ms-word แต่จนถึงตอนนี้ฉันทำได้แค่นี้ ... ซึ่งฉันไม่พอใจเพราะมันหมุนกล่อง ... Isn ' ไม่มีวิธีที่จะมีข้อความทิศทางแนวตั้งจริง? ฉันตั้งค่าการหมุนเป็น 305 องศาเท่านั้นในการสาธิตซึ่งไม่ทำให้ข้อความเป็นแนวตั้ง 270degจะ แต่ฉันทำการสาธิตเพื่อแสดงการหมุนเวียนเท่านั้น

106 html  css  text  vertical-alignment 

ฉันจะทำให้รายการของฉันปรากฏในแนวนอนติดต่อกันโดยใช้ CSS ได้อย่างไร #div_top_hypers { background-color:#eeeeee; display:inline; } #ul_top_hypers { display: inline; } <div id="div_top_hypers"> <ul id="ul_top_hypers"> <li>‣ <a href="" class="a_top_hypers"> Inbox</a></li> <li>‣ <a href="" class="a_top_hypers"> Compose</a></li> <li>‣ <a href="" class="a_top_hypers"> Reports</a></li> <li>‣ <a href="" class="a_top_hypers"> Preferences</a></li> <li>‣ <a href="" class="a_top_hypers"> logout</a></li> </ul> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด

106 html  css  html-lists 

มีวิธีใดบ้างที่ CSS จะกำหนดเป้าหมายอินพุตทั้งหมดตามประเภท ฉันมีคลาสปิดการใช้งานที่ฉันใช้กับองค์ประกอบฟอร์มที่ปิดใช้งานต่างๆและฉันกำลังตั้งค่าสีพื้นหลังสำหรับกล่องข้อความ แต่ฉันไม่ต้องการให้ช่องทำเครื่องหมายของฉันได้รับสีนั้น ฉันรู้ว่าฉันสามารถทำได้โดยแยกชั้นเรียน แต่ฉันควรใช้ CSS ถ้าเป็นไปได้ ฉันแน่ใจว่าฉันสามารถตั้งค่านี้ใน javascript ได้ แต่กำลังมองหา CSS อีกครั้ง ฉันกำหนดเป้าหมาย IE7 + ฉันไม่คิดว่าฉันจะใช้ CSS3 ได้ แก้ไข ด้วย CSS3 ฉันจะทำอะไรได้บ้าง? INPUT[type='text']:disabled นั่นจะเป็นการดีกว่าที่จะกำจัดชั้นเรียนของฉันโดยสิ้นเชิง ... แก้ไข โอเคขอบคุณสำหรับความช่วยเหลือ! นี่คือตัวเลือกที่แก้ไขกล่องข้อความและพื้นที่ทั้งหมดที่ถูกปิดใช้งานโดยไม่ต้องตั้งค่าคลาสใด ๆ เมื่อฉันเริ่มคำถามนี้ฉันไม่เคยคิดว่ามันจะเป็นไปได้ ... INPUT[disabled][type='text'], TEXTAREA[disabled] { background-color: Silver; } ใช้งานได้ใน IE7

106 css  internet-explorer  css-selectors 

ฉันมีรายชื่อและ Li มีfloat:left;. เนื้อหาหลัง<ul>ควรจัดเรียงให้ถูกต้อง ดังนั้นฉันสามารถสร้างสิ่งต่อไปนี้: http://jsfiddle.net/8unU8/ ฉันคิดว่าฉันสามารถลบออกได้<div class="clear">โดยใช้ตัวเลือกหลอกเช่น: after แต่ตัวอย่างไม่ทำงาน: http://jsfiddle.net/EyNnk/ ฉันต้องสร้าง div แยกต่างหากเพื่อล้างองค์ประกอบที่ลอยอยู่เสมอหรือไม่

106 html  css 

ฉันจะซ่อนแถวตาราง HTML <tr>เพื่อไม่ให้มีพื้นที่ว่างได้อย่างไร ฉัน<tr>ตั้งค่าเป็นหลายชุดstyle="display:none;"แต่ยังคงมีผลต่อขนาดของตารางและเส้นขอบของตารางจะสะท้อนถึงแถวที่ซ่อนอยู่

106 html  css  html-table 

ฉันต้องการออกแบบบล็อกข้อความดังภาพต่อไปนี้: ถามว่าเป็นไปได้ไหม?

106 html  css 

ฉันค้นหาวิธีแก้ปัญหามาระยะหนึ่งแล้ว แต่ไม่พบอะไรเลย อาจจะเป็นแค่คำค้นหาของฉัน ฉันกำลังพยายามสร้างศูนย์ผ้าใบตามขนาดของหน้าต่างเบราว์เซอร์ ผ้าใบมีขนาด 800x600 และหากหน้าต่างมีขนาดต่ำกว่า 800x600 ก็ควรปรับขนาดเช่นกัน (แต่ตอนนี้ไม่สำคัญมาก)

106 html  canvas  css  resize 

ฉันกำลังสร้างเว็บไซต์ขั้นสูง คำถามของฉัน: เป็นไปได้ไหมที่จะเลือกเด็กคนอื่น ๆ ทั้งหมดยกเว้น:first-childและ:last-child? ฉันรู้ว่ามี:not()ตัวเลือก แต่ใช้ไม่ได้กับมากกว่าหนึ่งตัวที่ไม่ได้อยู่ในวงเล็บ นี่คือสิ่งที่ฉันมี: #navigation ul li:not(:first-child, :last-child) { background: url(images/UISegmentBarButtonmiddle@2x.png); background-size: contain; }

106 html  css  css-selectors 

ฉันต้องการสร้างช่วงที่มีความกว้างคงที่ซึ่งเมื่อฉันพิมพ์สิ่งใด ๆ ในช่วงเช่น<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>สตริงข้อความยาว ๆ ที่ไม่เว้นวรรคคำนั้นจะแบ่งหรือตัดไปที่บรรทัดถัดไป ความคิดใด ๆ ?

106 html  css