Có chiều cao và chiều rộng không áp dụng cho span?

254

Tổng số câu hỏi noob, nhưng ở đây.

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>

Vĩ cầm

Về cơ bản, tôi đang cố gắng mô phỏng một nút, tạo một nhịp (hoặc một cái gì đó) trông giống như một nút bên cạnh trường nhập thực sự không cần phải là do trình tạo tự động điền tự động tạo ra lỗi trên Entry. Nghĩ rằng đây sẽ là một sửa chữa nhanh chóng nhưng rõ ràng là không.

Cảm ơn.

css html width

— Kyle
nguồn

2

Bạn cũng có thể muốn kiểm tra stackoverflow.com/questions/2343989/ từ

— Edan Maor

2

Đồng thời kiểm tra tiêu chuẩn, cụ thể là w3.org/TR/CSS2/visudet.html#the-ference-property và w3.org/TR/CSS2/visudet.html#the-height-property , trong đó nêu rõ các thuộc tính "Áp dụng cho: tất cả các yếu tố ngoại trừ các yếu tố nội tuyến không thay thế, các hàng trong bảng và các nhóm hàng "

— outis

426

Span là một yếu tố nội tuyến. Nó không có chiều rộng hoặc chiều cao.

Bạn có thể biến nó thành một yếu tố cấp khối, sau đó nó sẽ chấp nhận các chỉ thị kích thước của bạn.

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

— Basheer AL-MOMani
nguồn

9

Cảm ơn, đã sửa nó. Tôi đã thử hiển thị: chặn trước nhưng khối nội tuyến đã sửa nó.

— Kyle

21

Đó chính là vấn đề. Nếu display: blockđược chỉ định, span dừng là một phần tử nội tuyến và một phần tử sau khi nó xuất hiện trên dòng tiếp theo. Tôi cần một yếu tố nội tuyến, nhưng có thể có chiều rộng mong muốn.

— Paul

6

một giải pháp tốt hơn là hiển thị người dùng: chặn nội tuyến

— Anant

37

Hãy thử sử dụng divthay vì spanhoặc sử dụng CSS display: block;hoặc display: inline-block;- spantheo mặc định là một yếu tố nội tuyến không thể lấy widthvà heightthuộc tính.

— Isaac
nguồn

9

một div không phải là một thay thế ngữ nghĩa cho một khoảng. Một nhịp là một thùng chứa văn bản trong khi div là một thùng chứa bố trí. Áp dụng kiểu khối nội tuyến như Developer Art đã gợi ý là câu trả lời đúng.

— Brian Scott

3

Câu hỏi cung cấp không có ngữ cảnh để chỉ ra rằng một div vốn không phù hợp về mặt ngữ nghĩa.

— Isaac

1

Trên thực tế, đọc đánh dấu của op, nó thực sự trông giống như yếu tố trong câu hỏi đang được sử dụng để chỉ hiển thị một hình ảnh nền. Trong trường hợp này, một div thực sự sẽ thích hợp hơn. -1 xóa khỏi nhận xét ban đầu của Isaac.

— Brian Scott

Hơn nữa, tôi đã thử sử dụng div trước khi chuyển sang span, nó luôn hiển thị theo div trước đó .. Vì vậy, đã đi với Span :)

— Kyle

22

Lấy cảm hứng từ @Hamed, tôi đã thêm vào như sau và nó hoạt động với tôi:

display: inline-block; overflow: hidden;

— ô liu
nguồn

11

Span chỉ lấy chiều rộng và chiều cao khi chúng ta tạo thành phần tử khối.

span {display:block;}

— Touhid Rahman
nguồn

14

Tôi nghĩ display: inline-block;là tốt hơn

— 151291

Làm theo cách này bạn sẽ thay đổi cho tất cả các nhịp, tôi khuyên bạn nên sử dụng một lớp.

— Hola Soy Edu Feliz Navidad

9

Theo nhận xét từ @Paul, Nếu khối hiển thị: được chỉ định, span dừng lại là một thành phần nội tuyến và một thành phần sau khi nó xuất hiện trên dòng tiếp theo.

Tôi đến đây để tìm giải pháp cho vấn đề chiều cao nhịp của tôi và tôi đã có một giải pháp của riêng mình

Thêm overflow:hidden;và keeing nó nội tuyến sẽ giải quyết vấn đề vừa được thử nghiệm trong chế độ Quirks IE8

— Hamed Ali Khan
nguồn

Tôi tiếp tục nhìn thấy overflow:hidden;trong bối cảnh này. "Nội dung được cắt bớt, không có thanh cuộn" MDN nói . Có vẻ phản trực giác. Nó làm gì ở đây?

— Bob Stein

8

spans theo mặc định được hiển thị nội tuyến, có nghĩa là chúng không có chiều cao và chiều rộng.

Hãy thử thêm một display: blockkhoảng của bạn.

— Edan Maor
nguồn

6

Span bắt đầu như là một yếu tố nội tuyến. Ví dụ, bạn có thể thay đổi thuộc tính hiển thị của nó thành chặn và các thuộc tính chiều cao / chiều rộng của nó sẽ bắt đầu có hiệu lực.

2

span {display:block;} cũng thêm một ngắt dòng.

Để tránh điều đó, hãy sử dụng span {display:inline-block;}và sau đó bạn có thể thêm chiều rộng và chiều cao cho phần tử nội tuyến và bạn cũng có thể căn chỉnh nó trong khối:

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

thêm ở đây

— đánh dấu
nguồn