কীভাবে পি ট্যাগ সহ একটি নতুন লাইন এড়ানো যায়?

Question

<p>ট্যাগ সহ কাজ করার সময় আমি কীভাবে একই লাইনে থাকতে পারি ?

Comments

চিত্র এবং পাঠ্য সহ একটি ক্যারোসেল তৈরি করতে চান

— জোশ

@ নিশান্ট: তারপরে, বলুন, ব্যবহার করুন <span>। <p>অনুচ্ছেদের জন্য বোঝানো হয়।

— স্টিভ হ্যারিসন

@ নিশান্ট: আপনি যখন কোনও ট্যাগকে কোনও নির্দিষ্ট পদ্ধতিতে আচরণ করতে বাধ্য করেন (যেমন display: inline;তার চেয়ে এটি তৈরি করা display: block;), এটি একটি ভাল ইঙ্গিত যে আপনি সম্ভবত ভুল ট্যাগটি ব্যবহার করছেন ...

— স্টিভ হ্যারিসন

Answer 1

display: inlineসিএসএস সম্পত্তি ব্যবহার করুন ।

আদর্শ: স্টাইলশিটে:

#container p { display: inline }

খারাপ / চরম পরিস্থিতি: ইনলাইন:

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

Comments

সিএসএস সঠিক করুন, তবে মূল প্রশ্ন মন্তব্যে ছেলেরা ঠিক বলেছেন ... আপনি কেন এটি করবেন তা নিজেকে জিজ্ঞাসা করুন ... SPANএই পরিস্থিতির জন্য আরও উপযুক্ত মনে হয়।

— one.beat.consumer

স্প্যান একই এবং নতুন লাইনে যায় না! যেমনটি one.beat.consumerবলা হয়েছে

— অ্যানিচো

+1 প্রতিক্রিয়াশীল মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে মোবাইল ডিভাইসে স্থান বাঁচানোর জন্য দরকারী: ডি

— জিফ

আমি কৌণিক জেএসে কাজ করছি, এবং 'এনজি-রিপিট' দিয়ে আমার একটি অনুচ্ছেদের পুনরাবৃত্তি করা দরকার, এটি পুরোপুরি কাজ করেছিল। এবং স্প্যান আমাকে কেবল ত্রুটি দিয়েছে।

— sch

যে প্রোগ্রামটির সাথে আউটপুট <p> ট্যাগগুলি বিভাজক হিসাবে ব্যবহার করে তার সাথে ডিল করার সময় একটির প্রয়োজন হবে। জ্যাঙ্গো উদাহরণস্বরূপ।

— জিম পল

Answer 2

<p>অনুচ্ছেদ ট্যাগ লেখার অনুচ্ছেদ উল্লেখ জন্য বোঝানো হয়। আপনি যদি নতুন লাইনে পাঠ্যটি শুরু না করতে চান তবে আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি <p>ট্যাগটি ভুলভাবে ব্যবহার করছেন । <span>আপনি যা অর্জন করতে চান তা সম্ভবত ট্যাগ আরও নিবিড়ভাবে ফিট করে ...?

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। প্রশ্নের সরাসরি কোনও উত্তর নেই, তবে সম্ভবত সমস্যার আরও ভাল সমাধান।

— Fr4nc3sc0NL

Answer 3

আমি সিএসএসের জন্য এটি পেরিয়ে এসেছি

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

অনুরূপ স্ট্যাকওভারফ্লো প্রশ্নের মাধ্যমে

Comments

আমার উপচে পড়ার দরকার নেই: লুকানো। ধন্যবাদ

— স্টিংকিগ্যাট

Answer 4

কিছুটা এইরকম:

p
{
    display:inline;
}

আপনার স্টাইলশীটে এটি সমস্ত পি ট্যাগগুলির জন্য করবে।

Answer 5

ফ্লেক্সবক্স কাজ করে।

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