Bagaimana cara mencegah tag DIV memulai baris baru?

89

Saya ingin menampilkan satu baris teks ke browser yang berisi tag. Ketika ini diberikan, tampaknya DIV menyebabkan garis baru. Bagaimana saya bisa menyertakan konten dalam tag div pada baris yang sama - ini kode saya.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

Saya sudah mencoba merapikannya di sini. Bagaimana saya bisa memiliki tampilan ini dalam satu baris?

html css tidak terdefinisi
sumber
Sekadar menunjukkan, Anda tidak memerlukan tanda kurung saat menggunakan echo. echo $id;valid seperti echo($id);.
Eddie Hart

Jawaban:

142

The divtag adalah elemen blok, menyebabkan perilaku itu.

Anda harus menggunakan spanelemen sebagai gantinya, yang sebaris.

Jika Anda benar - benar ingin menggunakan div, tambahkan style="display: inline". (Anda juga bisa memasukkannya ke dalam aturan CSS)

SLaks
sumber
13
Hanya display: inlinebertentangan untuk apa DIV itu, jadi tolong jangan lakukan itu! Gunakan span sebagai gantinya.
Robert K
28
Saya sangat menyadari itu; itulah mengapa saya menulis if you really want to.
SLaks
22
Div didefinisikan sebagai divisi halaman, sebelum HTML5. Itu tidak ditentukan dengan karakteristik presentasi apa pun. Dengan kata lain, div secara semantik sesuai dengan definisinya berdasarkan konten dan elemen yang dikandungnya. Akibatnya, tidak masalah untuk menyetel div ke display: inline dan tidak melanggar semantik atau definisi standar apa pun.
2
Dalam kasus saya, saya tidak dapat menggunakan span, karena saya ingin mendefinisikan properti break-word word wrap, dan itu hanya berfungsi untuk elemen tipe blok. Tetapi saya tidak dapat menggunakan div, karena saya tidak menginginkan baris baru. Jadi sebagai gantinya saya menggunakan display: inline-blockdan elemen div. Katakan apa yang Anda inginkan tentang gaya, tetapi ini menyelesaikan kedua masalah.
jsarma
Itu tidak berhasil untuk saya! Saya berharap itu memperluas sel tempat div berada, tetapi tidak ada perubahan yang terjadi
rezKesh
36

Saya bukan seorang ahli tapi cobalah white-space:nowrap;

Properti white-space didukung di semua browser utama.

Catatan: Nilai "inherit"tidak didukung di IE7 dan sebelumnya. IE8 membutuhkan !DOCTYPE. IE9 mendukung "inherit".

Shivanshu
sumber
Sangat bagus ketika Anda membutuhkan elemen blok-sebaris untuk tidak membungkus di akhir baris ketika Anda memiliki overflow: hiddenelemen bungkus dan Anda memindahkannya sesuai dengan induk "di latar belakang" :)
jave.web
16

div adalah elemen blok, yang selalu menempati barisnya sendiri.

gunakan spantag sebagai gantinya

cobbal
sumber
10
Anda membingungkan presentasi untuk fungsi. Sebuah div mengambil barisnya sendiri karena disajikan sebagai display: block secara default dan tidak ada alasan lain.
1
Tapi span juga menciptakan jeda baris sebelum dan sesudah?
pengguna3761308
6

Tambahkan style="display: inline"ke div Anda.

Franz
sumber
5

gunakan float: left pada div dan link, atau gunakan span.

Jimmeh
sumber
1

Gunakan properti css - white-space: nowrap;

Jithjob Ignatious
sumber
0

Cara yang lebih baik untuk melakukan break line adalah menggunakan span dengan parameter gaya CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Contoh langsung di HTML Anda

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
Alex. Manfrin
sumber
-1 
<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>
dfilkovi
sumber
3
Ide buruk untuk menggunakan javascript + php, ketika Anda bisa baik-baik saja dengan hanya css.
ZurabWeb
@ Piero Mengapa Anda mengatakan itu? Backend biasanya diperlukan untuk aplikasi front end
Curious
3
@Curious true, tetapi backend harus berurusan dengan hal-hal backend seperti penghitungan dan penanganan data, sedangkan frontend harus dibiarkan untuk diproses oleh browser. Ini mengurangi beban server dan meningkatkan pengalaman pengguna. Ini secara umum. Namun, dalam kasus khusus ini, <a href="pagea.php?id=<?php echo $id; ?> "> Halaman A </a> sudah cukup baik. Dan dengan getData.php, mengapa harus memiliki php parse dan output javascript jika ini dapat ditangani oleh apache? Seperti: src = "getData.js? Id = <? Php echo $ id;?>"
ZurabWeb
-2

Anda cukup menggunakan:

#contentInfo_new br {display:none;}
pengguna3012794
sumber