it-swarm-vi.tech

Cách chèn ngắt dòng trong tài liệu HTML bằng CSS

Tôi đang viết một dịch vụ web và tôi muốn trả lại dữ liệu dưới dạng XHTML. Bởi vì đó là dữ liệu, không phải đánh dấu, tôi muốn giữ cho nó thật sạch sẽ - không có thêm <div>s hay <span>s. Tuy nhiên, để thuận tiện cho các nhà phát triển, tôi cũng muốn làm cho dữ liệu được trả về có thể đọc được một cách hợp lý trong trình duyệt. Để làm như vậy, tôi nghĩ một cách tốt để sử dụng CSS là sử dụng CSS. 

Điều tôi đặc biệt muốn làm là chèn các dấu ngắt dòng ở một số vị trí nhất định. Tôi biết về hiển thị: chặn, nhưng nó không thực sự hoạt động trong tình huống tôi đang cố xử lý ngay bây giờ - một biểu mẫu với các trường <input>. Một cái gì đó như thế này: 

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

Tôi muốn nó hiển thị sao cho mỗi nhãn hiển thị trên cùng một dòng với trường nhập tương ứng. Tôi đã thử điều này: 

input.a:after { content: "\a" }

Nhưng điều đó dường như không làm gì cả. 

38
Craig Andera

Tốt nhất là bọc tất cả các yếu tố của bạn trong các thành phần nhãn, sau đó áp dụng css cho nhãn. Các lớp giả trước: sau và sau không hoàn toàn được hỗ trợ một cách nhất quán.

Thẻ nhãn có rất nhiều lợi thế bao gồm khả năng tiếp cận tăng (trên nhiều cấp độ) và hơn thế nữa.

<label>
    Thingy one: <input type="text" name="one">;
</label>

sau đó sử dụng CSS trên các thành phần nhãn của bạn ...

label {display:block;clear:both;}
54
BrewinBombers

Điều khiển biểu mẫu được xử lý đặc biệt bởi các trình duyệt, vì vậy rất nhiều thứ không nhất thiết phải hoạt động như bình thường. Một trong những điều này là nội dung được tạo - nó không hoạt động đối với các điều khiển biểu mẫu. Thay vào đó, bọc nhãn trong <label> và sử dụng label:before { content: '\a' ; white-space: pre; }. Bạn cũng có thể làm điều đó bằng cách thả nổi mọi thứ và thêm clear: left vào các phần tử <label>.

41
Jim

Có vẻ như bạn đã có một loạt các mục biểu mẫu bạn muốn hiển thị trong danh sách, phải không? Hmm ... nếu chỉ những kẻ đặc tả HTML đó đã nghĩ đến việc đánh dấu để xử lý một danh sách các mục ...

Tôi khuyên bạn nên thiết lập nó như thế này:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Sau đó, CSS trở nên dễ dàng hơn nhiều.

12
Jon Galloway

sau đây sẽ cung cấp cho bạn những dòng mới. Nó cũng sẽ đặt thêm không gian phía trước mặc dù ... bạn sẽ phải làm xáo trộn nguồn thụt đầu nguồn của mình bằng cách xóa tab.

form { white-space: pre }
4
Jimmy
<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

và css sau

form label { display: block; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>
2
Galen

Một tùy chọn là chỉ định mẫu XSLT trong XML của bạn (một số) trình duyệt sẽ xử lý cho phép bạn bao gồm bản trình bày với đánh dấu, CSS, màu sắc, v.v. không nên ảnh hưởng đến người tiêu dùng dịch vụ web.

Khi ở trong XHTML, bạn chỉ cần thêm một số phần đệm xung quanh các phần tử bằng CSS, ví dụ:.

biểu mẫu đầu vào.a {lề-dưới: 1em}

2
DamienG

Bí mật là bao quanh toàn bộ điều, nhãn và widget của bạn, trong một khoảng có lớp thực hiện khối và xóa:

<style type="text/css">
.lb {
display:block;clear:both;
}
</style>

<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
1
D-n Russler

Các tùy chọn javascript là tất cả những điều phức tạp hơn. Làm như Jon Galloway hoặc daniels0xff đề nghị.

0
lordscarlet

Tôi đồng ý với John Millikin. Bạn có thể thêm các thẻ <span> hoặc một cái gì đó xung quanh mỗi dòng với một lớp CSS được xác định, sau đó làm cho chúng hiển thị: chặn nếu cần. Cách duy nhất khác mà tôi có thể nghĩ để làm điều này là biến <input> thành một khối nội tuyến và làm cho chúng phát ra phần đệm "rất lớn", điều này sẽ làm cho nội dung nội tuyến được bao bọc.

Mặc dù vậy, cách tốt nhất của bạn là nhóm hợp lý dữ liệu theo các thẻ <span> (hoặc tương tự) để chỉ ra rằng dữ liệu đó thuộc về nhau (và sau đó để CSS thực hiện định vị).

0
Thunder3

Phần tử rõ ràng CSS có lẽ là những gì bạn đang tìm kiếm để có được các ngắt dòng .

#login hình thức nhập { rõ ràng: cả hai; }

sẽ đảm bảo không có phần tử nổi nào khác được đặt ở hai bên của các trường nhập của bạn.

Tài liệu tham khảo

0
Leo Utskot