Tôi sử dụng <span> thẻ trong tiêu đề mô-đun của mình, ví dụ:Chiều rộng CSS của thẻ <span>
<span>Categories</span>.
tôi chỉ định của khoảng màu nền/hình ảnh, chiều rộng và chiều cao trong css.
Nhưng chiều rộng của span phụ thuộc vào nội dung/văn bản của nó.
Vì vậy, nếu tôi làm <span></span>, chỉ với hình nền/màu sắc trong css, không có gì xuất hiện.
Tất nhiên, tôi muốn thứ gì đó xuất hiện.
Tôi làm cách nào để giải quyết vấn đề này?
Bạn có thể đặt thuộc tính hiển thị thành "chặn" một cách rõ ràng để nó hoạt động giống như một phần tử mức khối, nhưng trong trường hợp đó, bạn có thể chỉ nên sử dụng một div thay thế.
<span style="display:block; background-color:red; width:100px;"></span>
cảm ơn, tôi hiểu. điều đó xảy ra vì span là nội dòng. bây giờ tôi thấy sự khác biệt đặt cược. hiển thị nội tuyến & khối. vâng, div là thích hợp.:D..thanks –
Sử dụng DIV bên trong đoạn văn, tiêu đề (h1, h2, v.v.) sẽ phá vỡ xác thực nếu bạn quan tâm đến điều đó. Một sollution có thể là sử dụng một khoảng, hiển thị: khối; và phao: trái; :) –
cảm ơn, và câu trả lời dưới đây là rất quan trọng để có được chiều rộng làm việc – Angela
Bạn không thể chỉ định chiều rộng của phần tử có nội tuyến hiển thị. Bạn có thể đặt một cái gì đó trong nó như một không gian không phá vỡ ( ) và sau đó đặt padding để cung cấp cho nó một số chiều rộng hơn nhưng bạn không thể kiểm soát nó trực tiếp.
Bạn có thể sử dụng khối nội tuyến hiển thị nhưng không được hỗ trợ rộng rãi.
Một hack thực sự sẽ là đặt một hình ảnh bên trong và sau đó thiết lập chiều rộng của nó. Một cái gì đó giống như một GIF 1 pixel trong suốt. Tuy nhiên, không phải cách tiếp cận được đề nghị.
kéo dài theo mặc định thành kiểu nội tuyến mà bạn không thể chỉ định chiều rộng của.
display: inline-block;
sẽ là một cách tốt, ngoại trừ IE không hỗ trợ nó
bạn có thể, tuy nhiên, hack a multiple browser solution
Tôi tin rằng IE hỗ trợ inline-block kể từ ít nhất là phiên bản 6. Tôi nghĩ rằng nó chỉ hỗ trợ inline-block nếu phần tử được áp dụng là inline tự nhiên (trong đó là). –
Đúng, IE không hỗ trợ chặn nội dòng. Sự hỗ trợ của nó là khác nhau, nhưng nó sẽ hoạt động trong trường hợp này. – thomasrutter
Tuyệt vời! Bắt đầu hiểu sự khác biệt thực sự trong hiển thị: –
Sử dụng các thuộc tính 'display' như trong ví dụ:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Tôi sẽ sử dụng thuộc tính padding. Điều này sẽ cho phép bạn thêm một số thiết lập của pixel để hai bên của phần tử mà không cần yếu tố mất phẩm chất khoảng của nó:
Phương pháp này sẽ chỉ thêm vào phần đệm, vì vậy nếu bạn thay đổi độ dài của nội dung (từ Danh mục thành Thẻ, ví dụ) kích thước của nội dung sẽ thay đổi và kích thước tổng thể của phần tử cũng sẽ thay đổi. Nhưng nếu bạn thực sự muốn thiết lập một kích thước cứng nhắc, bạn nên làm như đã đề cập ở trên và sử dụng một div.
Xem box model để biết thêm chi tiết về mô hình hộp, nội dung, đệm, lề vv
Sau khi cố định chiều cao và chiều rộng bạn sholud nói như thế nào để bahave nếu văn bản bên trong nó tràn khu vực của nó.Vì vậy, hãy thêm vào css
tràn: tự động;
Giống như trong câu trả lời khác, bắt đầu khoảng thời gian của bạn thuộc tính với điều này:
display:inline-block;
Bây giờ bạn có thể sử dụng đệm hơn width:
padding-left:6%;
padding-right:6%;
Khi bạn sử dụng đệm, màu sắc của bạn mở rộng để cả hai bên (phải và trái), không chỉ vừa phải (như trong widht).
Tôi chỉ muốn chỉ ra rằng đây không phải là cách sử dụng nhịp rất tốt. Nó có nghĩa là để đánh dấu các phạm vi ngắn của nội dung trong một tổng thể lớn hơn, do đó, nó cố ý không phải là một phần tử khối theo mặc định. Đối với tiêu đề, một trong các thẻ h # sẽ là tốt nhất. Nếu không, một div vẫn thường tốt hơn một nhịp. – Chuck
cảm ơn câu trả lời của bạn ..: D tôi tìm thấy một q'n ngớ ngẩn này để bắt đầu với.lol..so nhiều năm trước rồi. =)) –