ฉันจะป้องกันไม่ให้แท็ก DIV ขึ้นบรรทัดใหม่ได้อย่างไร

89

ฉันต้องการส่งออกข้อความบรรทัดเดียวไปยังเบราว์เซอร์ที่มีแท็ก เมื่อแสดงผลปรากฏว่า DIV ทำให้เกิดบรรทัดใหม่ ฉันจะรวมเนื้อหาในแท็ก div ในบรรทัดเดียวกันได้อย่างไร - นี่คือรหัสของฉัน

<?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>

ฉันพยายามจัดระเบียบที่นี่แล้ว ฉันจะแสดงสิ่งนี้เป็นบรรทัดเดียวได้อย่างไร?

html css

— ไม่ได้กำหนด
แหล่งที่มา

เพื่อชี้ให้เห็นว่าคุณไม่จำเป็นต้องใช้วงเล็บเมื่อใช้เสียงสะท้อน echo $id;ใช้ได้เท่ากับecho($id);.

— Eddie Hart

142

divแท็กเป็นองค์ประกอบบล็อกก่อให้เกิดพฤติกรรมที่

คุณควรใช้spanองค์ประกอบแทนซึ่งอยู่ในบรรทัด

หากคุณจริงๆต้องการใช้เพิ่มdiv style="display: inline"(คุณสามารถใส่ไว้ในกฎ CSS ได้ด้วย)

— SLaks
แหล่งที่มา

13

เพียง แต่display: inlineขัดแย้งกับสิ่งที่ DIV คือสำหรับดังนั้นโปรดอย่าทำ! ใช้ช่วงแทน

— Robert K

28

ฉันรู้ดีว่า if you really want toนั่นคือเหตุผลที่ผมเขียน

— SLaks

22

div ถูกกำหนดให้เป็นส่วนหนึ่งของหน้าก่อน HTML5 ไม่ได้กำหนดด้วยลักษณะการนำเสนอใด ๆ กล่าวอีกนัยหนึ่ง div มีความเหมาะสมตามความหมายตามคำจำกัดความตามเนื้อหาและองค์ประกอบที่มีอยู่ ด้วยเหตุนี้จึงเป็นการดีอย่างยิ่งที่จะตั้งค่า div ให้แสดง: แบบอินไลน์และไม่ละเมิดความหมายหรือคำจำกัดความมาตรฐานใด ๆ

2

ในกรณีของฉันฉันไม่สามารถใช้ span ได้เพราะฉันต้องการกำหนดคุณสมบัติการตัดคำแบบแบ่งคำและใช้กับองค์ประกอบประเภทบล็อกเท่านั้น แต่ฉันใช้ div ไม่ได้เพราะฉันไม่ต้องการขึ้นบรรทัดใหม่ ดังนั้นฉันจึงใช้display: inline-blockและองค์ประกอบ div แทน บอกว่าคุณต้องการอะไรเกี่ยวกับสไตล์ แต่สิ่งนี้ช่วยแก้ปัญหาทั้งสองอย่างได้

— jsarma

มันไม่ได้ผลสำหรับฉัน! ฉันคาดว่ามันจะขยายเซลล์ที่ div อยู่ แต่ไม่มีการเปลี่ยนแปลงเกิดขึ้น

— rezKesh

37

ฉันไม่ใช่ผู้เชี่ยวชาญ แต่ลองดู white-space:nowrap;

คุณสมบัติพื้นที่สีขาวได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด

หมายเหตุ: "inherit"ไม่รองรับค่านี้ใน IE7 และรุ่นก่อนหน้า IE8 ต้องการไฟล์!DOCTYPE. IE9 "inherit"สนับสนุน

— Shivanshu
แหล่งที่มา

ยอดเยี่ยมเมื่อคุณต้องการองค์ประกอบแบบอินไลน์ที่ไม่ต้องพันท้ายบรรทัดเมื่อคุณมีoverflow: hiddenในองค์ประกอบตัดและคุณย้ายตาม "บนพื้นหลัง" ของพาเรนต์ :)

— jave.web

16

div เป็นองค์ประกอบบล็อกซึ่งจะขึ้นบรรทัดของตัวเองเสมอ

ใช้spanแท็กแทน

— งูเห่า
แหล่งที่มา

10

คุณกำลังสับสนในการนำเสนอสำหรับฟังก์ชัน div ใช้บรรทัดของตัวเองเนื่องจากแสดงเป็น display: block โดยค่าเริ่มต้นและไม่มีเหตุผลอื่น

1

แต่ span ยังสร้างเส้นแบ่งก่อนและหลัง?

— user3761308

6

เพิ่มstyle="display: inline"ลงใน div ของคุณ

— ฟรานซ์
แหล่งที่มา

5

ใช้ float: ทิ้งไว้บน div และลิงก์หรือใช้ span

— Jimmeh
แหล่งที่มา

1

ใช้คุณสมบัติ css - white-space: nowrap;

— Jithjob เพิกเฉย
แหล่งที่มา

0

วิธีที่ดีกว่าในการแบ่งบรรทัดคือการใช้ span กับพารามิเตอร์สไตล์ CSS white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

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

ตัวอย่างโดยตรงใน HTML ของคุณ

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>

— อเล็กซ์ มันเฟริน
แหล่งที่มา

-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
แหล่งที่มา

3

ความคิดที่แย่มากในการใช้ javascript + php เมื่อคุณสามารถใช้ได้ด้วย css เท่านั้น

— ZurabWeb

@ ปิเอโร่ทำไมถึงพูดแบบนั้น? โดยทั่วไปจำเป็นต้องใช้แบ็กเอนด์สำหรับแอปส่วนหน้า

— Curious

3

@ อยากรู้อยากเห็นจริง แต่แบ็กเอนด์ควรจัดการกับแบ็กเอนด์เช่นการคำนวณและการจัดการข้อมูลในขณะที่ส่วนหน้าควรปล่อยให้เบราว์เซอร์ประมวลผล ซึ่งจะช่วยลดภาระของเซิร์ฟเวอร์และปรับปรุงประสบการณ์ของผู้ใช้ นี่เป็นเงื่อนไขทั่วไป อย่างไรก็ตามในกรณีนี้ <a href="pagea.php?id=<?php echo $id; ?> "> หน้า A </a> จะดีพอ และด้วย getData.php ทำไมต้องมี php parse และ output javascript ถ้า apache จัดการได้ เช่น: src = "getData.js? id = <? php echo $ id;?>"

— ZurabWeb

-2

คุณสามารถใช้:

#contentInfo_new br {display:none;}

— ผู้ใช้ 3012794
แหล่งที่มา