Đường gạch dưới HTML dễ dàng

Question

Tôi đang tạo biểu mẫu trong HTML sẽ được in, với các trường cần được người nhận viết vào. Về cơ bản những gì tôi muốn là một dòng đơn trải dài từ cuối nhãn trường đến bên cạnh trang. Dưới đây là cách tôi đang thực hiện ngay bây giờ:

<table width="100%"> 
    <tr> 
     <td width="1%"> 
      Label: 
     </td> 
     <td style="border-bottom-style:solid; border-bottom-width:1px;"> 
      &nbsp; 
     </td> 
    </tr> 
</table> 

Công việc này, nhưng phải có cách dễ dàng hơn để thực hiện việc này mà không cần toàn bộ bảng. Bất kỳ ý tưởng?

Answer 1

Tôi nghĩ giải pháp của bạn tốt hơn so với các phản hồi từ trước đến nay. Điều duy nhất tôi muốn thay đổi về giải pháp của bạn là tôi sẽ sử dụng một lớp css thay vì inline.

Giải pháp của bạn sẽ có căn chỉnh tốt hơn so với sử dụng nhịp. Mã của bạn sẽ trông sạch hơn với các phần tử bảng hơn là kéo dài.

Ngoài ra, bạn có thể cân nhắc việc đặt một hộp văn bản vào ô để người dùng có thể nhập thông tin trực tiếp trên trang trước khi in ra.

Answer 2

Làm cách nào để sử dụng thẻ span?

<span style="border-bottom....">Text</span> 

Answer 3

Dưới đây là CSS của tôi:

span.print_underline 
{ 
    display: inline-block; 
    height: 1em; 
    border-bottom: 1px solid #000; 
} 

Vì vậy, HTML của bạn sẽ trông giống như:

<span class="print_underline" style="width: 200px">&nbsp;</span> 

tôi rời chiều rộng ra, vì vậy tôi có thể tái sử dụng nó càng nhiều càng tốt Tôi muốn, nhưng bạn có thể chỉ định chiều rộng.

Là một sidenote, tôi đã thử nghiệm cùng một khái niệm với thẻ div thay vì thẻ span và nó không hoạt động trong một số trường hợp. Điều này có lẽ vì không đúng ngữ nghĩa để đặt một div trong một thẻ đoạn (đó là lý do tại sao tôi sử dụng một khoảng), và tôi thường sử dụng các thẻ đoạn thay vì sử dụng các hàng bảng như bạn đã sử dụng.

Answer 4

chỉ cần có một div có lề thích hợp ở bên trái. Các phần tử khối theo mặc định luôn mở rộng đến toàn bộ chiều rộng.

Ý nghĩa:

 

label { 
    float: left; 
} 

div { 
    margin-left: 10em; 
    border-bottom: 1px solid black; 
    height: 1em; 
} 

<label>label:</label>

<div></div>

nó sẽ không kéo dài toàn bộ chiều rộng giữa các nhãn và phía bên phải, nhưng bạn có thể có nhãn ẩn phía dưới biên giới (sử dụng màu nền hoặc một cái gì đó) và có div mở rộng tất cả các cách để bên phải là tốt (không có lề).

Nếu bạn muốn ngữ nghĩa chính xác, bạn thậm chí có thể sử dụng đầu vào thay vì div, đặt hiển thị của nó thành "chặn" và sửa đường viền và nền.