Đường ngắt sau khi nhập mà không cần đánh dấu html

Question

Tôi đang cố hiển thị một số đầu vào và nhãn tương ứng của chúng. Họ là cả hai yếu tố nội tuyến, và tôi có một giải pháp làm việc với việc thêm một thẻ BR ở cuối như Id nên

<label for="hello"></label> 
<input id="hello" type="text" /> 
<br> 
<label for="stackoverflow"></label> 
<input id="stackoverflow" /> 

muốn giải quyết này mà không đánh dấu HTML không liên quan, tức là với CSS. cách dễ nhất để làm điều này là gì?

Tôi đã xem các câu hỏi khác tương tự như vậy, nhưng căn chỉnh theo hàng thay vì theo cột.

Answer 1

Bạn có thể quấn quanh nhãn đầu vào của bạn và hiển thị chúng như các khối:

<style> 
    label { display: block; } 
</style> 

<label> 
    Hello: <input name="hello"> 
</label> 
<label> 
    StackOverflow: <input name="stackoverflow"> 
</label> 

Lưu ý rằng khi bạn làm điều này bạn không cần phải sử dụng thuộc tính for="name".

Cách khác (nếu bạn không muốn các nhãn quấn quanh đầu vào của bạn) là nổi các nhãn bên trái:

<style> 
    label { float: left; clear: left; } 
</style> 

Tuy nhiên, tôi thường thích một chút đánh dấu hơn, một cái gì đó kết nối các label và input thành một yếu tố hợp lý, được gọi là một lĩnh vực :

<div class="field"> 
    <label for="hello">Hello</label> 
    <input name="hello"> 
</div> 
<div class="field"> 
    <label for="stackoverflow">Stackoverflow</label> 
    <input name="stackoverflow"> 
</div> 

Bởi vì mỗi lĩnh vực là một div, nó sẽ hiển thị như một Automatica khối lly, nhưng bạn có thể kiểm soát nó cho các lĩnh vực cá nhân là tốt.

Answer 2

Cố gắng đặt display:inline-block cho các yếu tố input và label của bạn. Vì vậy, bạn có thể thêm tất cả các thành phần khối css cụ thể như witdh hoặc margin-bottom.

Bạn cũng có thể đặt input và label thành display:block và chỉ thêm margin-bottom chỉ vào đầu vào. Hoặc bạn có thể đảo ngược nó và thêm một margin-top để các nhãn của bạn;)

Nếu bạn muốn loại bỏ các lề trên yếu tố cuối cùng bạn có thể sử dụng input:last-child {margin-bottom:0;}

input, label {display:block;} 
input {margin-bottom:18px;} 
input:last-child {margin-bottom:0;} 

/* Or to be specific you can use the attribut-selector 
    which only works on inputs with type="text" 
*/ 
input[type="text"]:last-child {margin-bottom:0;}