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

21

Bootstrap 4 จัดตำแหน่งรายการ navbar ทางด้านขวา

ฉันจะจัดตำแหน่งรายการ navbar ให้ถูกต้องได้อย่างไร? ฉันต้องการเข้าสู่ระบบและลงทะเบียนทางด้านขวา แต่ทุกสิ่งที่ฉันลองดูเหมือนจะไม่ทำงาน นี่คือสิ่งที่ฉันได้ลองไปแล้ว: <div>รอบ ๆ<ul>ด้วยแอททริบิวต์:style="float: right" <div>รอบ ๆ<ul>ด้วยแอททริบิวต์:style="text-align: right" ลองสองสิ่งเหล่านี้บน<li>แท็ก ลองทุกสิ่งเหล่านั้นอีกครั้งโดย!importantเพิ่มไปยังจุดสิ้นสุด เปลี่ยนnav-itemเป็นnav-rightใน<li> เพิ่มpull-sm-rightคลาสให้กับ<li> เพิ่มalign-content-endคลาสให้กับ<li> นี่คือรหัสของฉัน: <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home …

341 css twitter-bootstrap flexbox bootstrap-4 navbar

15

เพิ่ม Bootstrap Glyphicon ไปยังกล่องอินพุต

ฉันจะเพิ่ม glyphicon ลงในช่องป้อนข้อความได้อย่างไร ตัวอย่างเช่นฉันต้องการ 'ไอคอนผู้ใช้' ในการป้อนชื่อผู้ใช้สิ่งนี้:

340 css twitter-bootstrap glyphicons

5

ไม่มีการแบ่งบรรทัดหลังจากยัติภังค์

ฉันกำลังมองหาเพื่อป้องกันการแบ่งบรรทัดหลังจากยัติภังค์-ในแต่ละกรณีที่เข้ากันได้กับเบราว์เซอร์ทั้งหมด ตัวอย่าง: ฉันมีข้อความนี้: 3-3/8"ซึ่งใน HTML คือ: 3-3/8&rdquo; ปัญหาคือใกล้ถึงจุดสิ้นสุดของบรรทัดเนื่องจากเครื่องหมายยัติภังค์มันแบ่งและล้อมรอบบรรทัดถัดไปแทนที่จะปฏิบัติเหมือนคำเต็ม ... 3- 3/8" ฉันได้ลองใส่ "ความกว้างเป็นศูนย์ไม่มีอักขระหยุดพัก" &#65279;โดยไม่มีโชค ... 3-&#65279;3/8&rdquo; ฉันเห็นสิ่งนี้ใน Safari และคิดว่ามันจะเหมือนกันในทุกเบราว์เซอร์ ต่อไปนี้คือการdoctypeเข้ารหัสของฉันและตัวละคร ... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> มีวิธีใดที่ฉันสามารถป้องกันสิ่งเหล่านี้ไม่ให้เกิดการแตกหักหลังจากยัติภังค์? ฉันไม่ต้องการโซลูชันใด ๆ ที่ใช้กับทั้งหน้า ... สิ่งที่ฉันสามารถแทรกได้ตามต้องการเช่น "ความกว้างศูนย์ไม่มีอักขระหยุดพัก" ยกเว้นที่ใช้งานได้ นี่คือตัวอย่าง เพียงแค่ทำให้เฟรมแคบลงจนเส้นแบ่งที่ขีดกลาง http://jsfiddle.net/RagKH/

340 html css character-encoding line-breaks hyphenation

6

เทียบเท่ากับ jQuery .hide () เพื่อตั้งค่าการเปิดเผย: ซ่อน

ใน jQuery มี.hide()และ.show()วิธีการที่ตั้งdisplay: noneค่าการตั้งค่าCSS มีฟังก์ชั่นเทียบเท่าที่จะตั้งvisibility: hiddenค่าหรือไม่ ฉันรู้ว่าฉันสามารถใช้.css()แต่ฉันชอบฟังก์ชั่นบางอย่างเช่น.hide()หรือดังนั้น ขอบคุณ

340 javascript jquery css visibility

13

ลบ Safari / Chrome textinput / textarea glow

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

337 css cross-browser

14

วิธีสร้างแท็ก <style> ด้วย Javascript

ฉันกำลังมองหาวิธีแทรก<style>แท็กในหน้า HTML ด้วย JavaScript วิธีที่ดีที่สุดที่ฉันพบ: var divNode = document.createElement("div"); divNode.innerHTML = "<br><style>h1 { background: red; }</style>"; document.body.appendChild(divNode); ใช้งานได้ใน Firefox, Opera และ Internet Explorer แต่ไม่สามารถใช้ได้ใน Google Chrome มันก็น่าเกลียดนิดหน่อยเมื่อเทียบกับ<br>ด้านหน้าสำหรับ IE ไม่มีใครรู้วิธีสร้าง<style>แท็กที่ ดีกว่า ทำงานกับ Chrome ได้หรือไม่ หรืออาจจะ นี่คือสิ่งที่ไม่ได้มาตรฐานที่ฉันควรหลีกเลี่ยง เบราว์เซอร์ที่ใช้งานได้สามแบบยอดเยี่ยมและใครที่ใช้ Chrome

336 javascript html css

4

การรวบรวมเชิงรุกน้อยกว่าด้วย CSS3 calc

หักคอมไพเลอร์ที่ผมใช้ ( OrangeBitsและdotless 1.3.0.5 ) จะอุกอาจแปล body { width: calc(100% - 250px - 1.5em); } เข้าไป body { width: calc(-151.5%); } ซึ่งเห็นได้ชัดว่าไม่ต้องการ ฉันสงสัยว่ามีวิธีส่งสัญญาณไปยังผู้รวบรวมน้อยกว่าหรือไม่เพื่อเพิกเฉยต่อแอตทริบิวต์ในระหว่างการรวบรวม ฉันค้นหาเอกสารน้อยกว่าและเอกสารของทั้งสองคอมไพเลอร์และฉันไม่พบอะไรเลย คอมไพเลอร์น้อยลงหรือน้อยลงสนับสนุนสิ่งนี้หรือไม่ ถ้าไม่มีจะมีตัวขยาย CSS ที่ใช้งานได้หรือไม่

336 css compilation less css-calc

17

“ display: none” ป้องกันการโหลดภาพหรือไม่?

บทแนะนำการพัฒนาเว็บไซต์ที่ตอบสนองต่อทุกครั้งแนะนำให้ใช้display:noneคุณสมบัติ CSS เพื่อซ่อนเนื้อหาจากการโหลดบนเบราว์เซอร์มือถือเพื่อให้เว็บไซต์โหลดเร็วขึ้น มันจริงหรอ? ไม่display:noneโหลดภาพหรือยังโหลดเนื้อหาบนเบราว์เซอร์มือถือ? มีวิธีใดที่จะป้องกันการโหลดเนื้อหาที่ไม่จำเป็นในเบราว์เซอร์มือถือหรือไม่?

336 css responsive-design

12

เปลี่ยนชื่อคลาส jquery

ฉันต้องการเปลี่ยนคลาสของแท็ก td โดยระบุ id ของแท็ก td: <td id="td_id" class="change_me"> ... ฉันต้องการที่จะสามารถทำเช่นนี้ในขณะที่อยู่ในเหตุการณ์คลิกของวัตถุ Dom อื่น ๆ ฉันจะคว้า ID ของ td และเปลี่ยนคลาสได้อย่างไร

336 jquery css

24

วิธีสร้างเส้นแนวตั้งใน HTML

คุณสร้างเส้นแนวตั้งโดยใช้ HTML ได้อย่างไร

335 html css

12

ฉันจะมีผลต่อคลิกบน CSS ได้ไหม?

ฉันมีองค์ประกอบรูปภาพที่ต้องการเปลี่ยนแปลงเมื่อคลิก <img id="btnLeft"> งานนี้: #btnLeft:hover { width:70px; height:74px; } แต่สิ่งที่ฉันต้องการคือ: #btnLeft:onclick { width:70px; height:74px; } แต่มันไม่ทำงานแน่นอน เป็นไปได้หรือไม่ที่จะมีonclickพฤติกรรมใน CSS (เช่นโดยไม่ใช้ JavaScript)?

335 html css onclick

19

ทำปฏิกิริยา Js โดยใช้คุณสมบัติคลาสอย่างมีเงื่อนไข

ฉันต้องการแสดงและซ่อนกลุ่มปุ่มตามเงื่อนไขโดยขึ้นอยู่กับสิ่งที่ส่งผ่านจากองค์ประกอบหลักซึ่งมีลักษณะดังนี้: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span …

334 javascript css twitter-bootstrap-3 reactjs class-attributes

4

พอดีกับภาพพื้นหลังเพื่อ div

ฉันมีภาพพื้นหลังใน div ต่อไปนี้ แต่ภาพถูกตัดออก: <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"> มีวิธีแสดงภาพพื้นหลังโดยไม่ตัดออกหรือไม่?

334 html css background-image

19

CSS แสดงรูปภาพที่ปรับขนาดและครอบตัด

ฉันต้องการแสดงรูปภาพจาก URL ที่มีความกว้างและความสูงแม้ว่ามันจะมีอัตราส่วนขนาดที่แตกต่างกัน ดังนั้นฉันต้องการปรับขนาด (รักษาอัตราส่วน) แล้วตัดภาพให้มีขนาดที่ฉันต้องการ ฉันสามารถปรับขนาดด้วยimgคุณสมบัติhtml และสามารถตัดbackground-imageได้ ฉันจะทำทั้งสองอย่างได้อย่างไร ตัวอย่าง: ภาพนี้: มี800x600พิกเซลขนาดและฉันต้องการแสดงเช่นภาพ200x100พิกเซล ด้วยimgฉันสามารถปรับขนาดภาพ200x150px: <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> ที่ให้ฉันนี้: <img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล และด้วยbackground-imageฉันสามารถตัดภาพ200x100พิกเซล <div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> ให้ฉัน: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะทำทั้งสองอย่างได้อย่างไร ปรับขนาดภาพแล้วตัดตามขนาดที่ฉันต้องการหรือไม่

333 html css background-image image

10

วิธีการจัดกึ่งกลางคอนเทนเนอร์ในแนวตั้งใน Bootstrap

ฉันกำลังมองหาวิธีที่จะจัดศูนย์กลางcontainerdiv ไว้ในแนวตั้งภายในjumbotronและตั้งให้อยู่ตรงกลางของหน้า .jumbotronจะต้องมีการปรับตัวให้เต็มความสูงและความกว้างของหน้าจอ .containerdiv มีความกว้างของ1025pxและควรจะอยู่ตรงกลางของหน้า (กลางแนวตั้ง) ฉันต้องการให้หน้านี้มี jumbotron ที่ปรับให้เหมาะกับความสูงและความกว้างของหน้าจอพร้อมกับที่เก็บกึ่งกลางแนวตั้งไปที่ jumbotron ฉันจะประสบความสำเร็จได้อย่างไร .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> …

333 html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

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