ความสูงและความกว้างใช้ไม่ได้กับการขยายหรือไม่

254

คำถาม noob ทั้งหมด แต่ที่นี่

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>

ซอ

โดยทั่วไปฉันพยายามเลียนแบบปุ่มสร้างระยะห่าง (หรือบางอย่าง) ให้ดูเหมือนปุ่มถัดจากฟิลด์อินพุตที่จริงไม่จำเป็นต้องเป็นปุ่มเพราะตัวสร้างการเติมอัตโนมัติที่สร้างข้อผิดพลาดเมื่อป้อน คิดว่านี่จะเป็นการแก้ไขด่วนในตอนนี้ แต่ไม่ชัดเจน

ขอบคุณ

css html width

— ไคล์
แหล่งที่มา

2

คุณอาจต้องการตรวจสอบstackoverflow.com/questions/2343989/ …

— Edan Maor

2

ตรวจสอบมาตรฐานโดยเฉพาะw3.org/TR/CSS2/visudet.html#the-width-propertyและw3.org/TR/CSS2/visudet.html#the-height-propertyซึ่งระบุคุณสมบัติ "ใช้กับ: องค์ประกอบทั้งหมดยกเว้นองค์ประกอบแบบอินไลน์ที่ไม่ได้ถูกแทนที่แถวของตารางและกลุ่มแถว "

— outis

426

ช่วงเป็นองค์ประกอบอินไลน์ ไม่มีความกว้างหรือความสูง

คุณสามารถเปลี่ยนให้เป็นองค์ประกอบระดับบล็อกจากนั้นจะยอมรับคำสั่งมิติข้อมูลของคุณ

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

— Basheer AL-MOMANI
แหล่งที่มา

9

ขอบคุณแก้ไข ฉันลอง display: block before แล้ว แต่ inline block แก้ไข

— Kyle

21

นั่นคือปัญหา. หากdisplay: blockระบุไว้ span จะหยุดเป็นองค์ประกอบอินไลน์และองค์ประกอบหลังจากที่มันปรากฏในบรรทัดถัดไป ฉันต้องการองค์ประกอบที่เป็นแบบอินไลน์ แต่อาจมีความกว้างที่ต้องการ

— Paul

6

ทางออกที่ดีกว่าคือการแสดงผลของผู้ใช้: inline-block

— Anant

37

ลองใช้divแทนspanหรือใช้ CSS display: block;หรือdisplay: inline-block;- spanเป็นค่าเริ่มต้นองค์ประกอบแบบอินไลน์ซึ่งไม่สามารถใช้widthและheightคุณสมบัติ

— ไอแซก
แหล่งที่มา

9

div ไม่ใช่การแทนที่ semantic แทนสแปน การขยายเป็นภาชนะบรรจุต้นฉบับเดิมในขณะที่ div เป็นคอนเทนเนอร์โครงร่าง การใช้รูปแบบบล็อกแบบอินไลน์เช่น Developer Art ได้แนะนำคือคำตอบที่ถูกต้อง

— ไบรอันสกอตต์

3

คำถามไม่มีบริบทที่บ่งบอกว่า div นั้นไม่เหมาะสมทางอรรถศาสตร์

— Isaac

1

ที่จริงแล้วการอ่านมาร์กอัปของ op ดูเหมือนจริงว่าองค์ประกอบที่เป็นปัญหาถูกใช้เพื่อแสดงภาพพื้นหลัง ในกรณีนี้ div จะเหมาะสมกว่าจริง ๆ -1 ถูกลบออกจากความคิดเห็นดั้งเดิมของ Isaac

— Brian Scott

นอกจากนี้ผมพยายามที่จะใช้ div ก่อนที่จะเปลี่ยนไปใช้ช่วงก็มักจะแสดงภายใต้ div ก่อนหน้านี้ .. ดังนั้นไปกับช่วง :)

— ไคล์

22

แรงบันดาลใจจาก @Hamed ฉันได้เพิ่มสิ่งต่อไปนี้และได้ผลกับฉัน:

display: inline-block; overflow: hidden;

— Olleh
แหล่งที่มา

11

ช่วงใช้ความกว้างและความสูงเมื่อเราสร้างองค์ประกอบบล็อก

span {display:block;}

— Touhid Rahman
แหล่งที่มา

14

ฉันคิดว่าdisplay: inline-block;ดีกว่า

— 151291

การทำเช่นนี้คุณจะเปลี่ยนแปลงช่วงทั้งหมดฉันขอแนะนำให้ใช้คลาส

— Hola Soy Edu Feliz Navidad

9

ตามความคิดเห็นจาก @Paul หากระบุ display: block ไว้ span จะหยุดเป็นองค์ประกอบอินไลน์และองค์ประกอบหลังจากที่มันปรากฏในบรรทัดถัดไป

ฉันมาที่นี่เพื่อค้นหาวิธีแก้ปัญหาสำหรับปัญหาความสูงของฉันและฉันได้ทางออกของตัวเอง

การเพิ่มoverflow:hidden;และเข้าร่วมแบบอินไลน์จะช่วยแก้ปัญหาที่เพิ่งทดสอบในโหมด IE8 Quirks

— Hamed Ali Khan
แหล่งที่มา

ฉันเห็นoverflow:hidden;ในบริบทนี้ "เนื้อหาจะถูกตัดโดยไม่มีการเลื่อน" MDN กล่าวว่า ดูเหมือนจะง่าย ที่นี่ทำอะไรได้บ้าง

— Bob Stein

8

spans เป็นค่าเริ่มต้นแสดงแบบอินไลน์ซึ่งหมายความว่าพวกเขาไม่มีความสูงและความกว้าง

ลองเพิ่ม a display: blockไปยังช่วงของคุณ

— Edan Maor
แหล่งที่มา

6

ช่วงเริ่มต้นจากองค์ประกอบอินไลน์ คุณสามารถเปลี่ยนแอททริบิวการแสดงผลเพื่อบล็อกตัวอย่างเช่นแอททริบิวความสูง / ความกว้างจะเริ่มมีผล

2

span {display:block;} ยังเพิ่มตัวแบ่งบรรทัด

เพื่อหลีกเลี่ยงปัญหานี้ให้ใช้span {display:inline-block;}และจากนั้นคุณสามารถเพิ่มความกว้างและความสูงให้กับองค์ประกอบแบบอินไลน์และคุณสามารถจัดตำแหน่งภายในบล็อกได้เช่นกัน:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

เพิ่มเติมที่นี่

— markling
แหล่งที่มา