làm thế nào để tránh một dòng mới với thẻ p?

104

Làm cách nào để tôi giữ nguyên dòng trong khi làm việc với thẻ?

html css tags

— Josh
nguồn

muốn tạo một băng chuyền có hình ảnh và văn bản

— Josh

19

@Nishant: Sau đó sử dụng, nói ,. có nghĩa là cho các đoạn văn.

— Steve Harrison

6

@Nishant: Khi bạn phải buộc một thẻ để cư xử một cách nào đó (chẳng hạn như làm cho nó display: inline;chứ không phải display: block;), đó là một dấu hiệu tốt mà bạn có thể sử dụng thẻ sai ...

— Steve Harrison

171

Sử dụng thuộc tính display: inlineCSS.

Lý tưởng: Trong biểu định kiểu:

#container p { display: inline }

Tình huống xấu / Cực đoan: Nội tuyến:

<p style="display:inline">...</p>

— Doug Neiner
nguồn

11

CSS đúng, nhưng các chàng trai trong câu hỏi ban đầu nhận xét là đúng ... hãy tự hỏi bản thân tại sao bạn làm điều này ... SPANcó vẻ phù hợp hơn cho tình huống này.

— one.beat.consumer

5

Span giống nhau và không đi vào một dòng mới! như đã one.beat.consumernói

— Anicho

+1 Hữu ích để tiết kiệm dung lượng trên thiết bị di động bằng cách sử dụng các truy vấn phương tiện đáp ứng: D

— gef

Tôi đang làm việc trong angleJS và tôi cần lặp lại một đoạn với 'ng-repeat', điều này hoạt động hoàn hảo. Và Span chỉ cho tôi lỗi.

— sch

Người ta sẽ cần điều này khi xử lý một chương trình mà đầu ra của nó sử dụng các thẻ làm dấu phân cách. Ví dụ như biểu mẫu Django.

— Jim Paul

69

Các thẻ đoạn là có nghĩa là để xác định đoạn văn bản. Nếu bạn không muốn văn bản bắt đầu trên một dòng mới, tôi khuyên bạn nên sử dụng thẻ không chính xác. Có lẽ thẻ phù hợp hơn với những gì bạn muốn đạt được ...?

— Steve Harrison
nguồn

1

Đây phải là câu trả lời được chấp nhận. Không có câu trả lời trực tiếp cho câu hỏi, nhưng có lẽ là giải pháp tốt hơn cho vấn đề.

— Fr4nc3sc0NL

19

Tôi xem qua cái này cho css

span, p{overflow:hidden; white-space: nowrap;}

thông qua câu hỏi stackoverflow tương tự

— ackushiw
nguồn

1

Tôi không cần tràn: ẩn. Cảm ơn

— StinkyCat

5

cái gì đó như:

p
{
    display:inline;
}

trong biểu định kiểu của bạn sẽ làm điều đó cho tất cả các thẻ p.

— John Boker
nguồn

2

Flexbox hoạt động.

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items:center;
  border:1px solid #e3f2fd;
}
.item{
  flex: 1 1 auto;
  border:1px solid #ffebee;
}

<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
</div>

Mở rộng đoạn mã

— Ronnie Royston
nguồn