Bọc từ đúng trong thẻ span

Question

Tôi có biểu mẫu có thông báo xác thực nội dòng trong một khoảng.

<span id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span> 

Thật không may là quấn từ thực sự xấu xí. Tôi có thể đặt thông báo xác thực trong div, để làm đẹp thông báo. Kết quả là tốt hơn, nhưng không hoàn hảo.

<div id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</div> 

một cái gì đó như thế này Những gì tôi thực sự muốn là:

CSS gì mã bạn sẽ sử dụng để đạt được kết quả mong muốn?

Answer 1

Hãy thử

white-space: nowrap; 

Answer 2

Lý do có khả năng nhất mà tôi có thể nghĩ đến gây sự khác biệt giữa <div> và <span> bạn thẻ là một yếu tố <div> được coi là một yếu tố ngăn chặn, trong khi một yếu tố <span> được coi là inline.

Bạn có một số loại phần tử bao gói cho các phần tử nổi, một thứ trông như thế này?

<div class="row"> 
    <div style="float: left;"> 
     <span>Endzeit:</span> 
    </div> 
    <div style="float: left;"> 
     <input type="text" /> <span>10.2.2010</span> 
    </div> 
    <div id="EndTimeErrors"> 
     <label for="EndTime" class="field-validation-error"> 
       Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
     </label> 
    </div> 
</div> 

Nếu không, hãy thử và tôi nghĩ nó có thể hoạt động.

Answer 3

Đôi khi, tất cả bạn cần là một <br/>

Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34 

Answer 4

Dưới đây là đoạn code tôi đã kết thúc với:

<span id="EndTimeErrors" style="position: absolute; left: 300px;"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span> 

tôi vị trí khoảng cách tuyệt đối và chuyển nó sang bên trái 300px.

Tác phẩm này, nhưng tôi không hoàn toàn hài lòng với giải pháp này, vì 300px được mã hóa cứng. Nếu độ dài của nội dung ở phía trước thông báo xác thực sẽ thay đổi, tôi cũng cần phải thay đổi 300px.