কিভাবে একটি ডিভ বিষয়বস্তু মোড়ানো না?

Question

আমি এতে divদুটি বোতাম সহ একটি স্থির-প্রস্থ পেয়েছি । যদি বোতামগুলির লেবেলগুলি খুব দীর্ঘ হয় তবে এগুলি মোড়ানো হয় - একটি বোতামটি প্রথম লাইনে থাকে এবং পরের বোতামটি এটি সংলগ্নের পরিবর্তে নীচে অনুসরণ করে।

divউভয় বোতামটি এক লাইনে থাকা যাতে আমি কীভাবে প্রসারিত করতে বাধ্য করতে পারি ?

Comments

এমনকি আমি আমার ওপেনআইডি-তে ডক্টাইপে লগইন করতে পারি না, সুতরাং প্রশ্নটি এখানে সবচেয়ে ভাল মেথিক্স করে।

— স্টিফান কেন্ডাল

@ নিখোলায়েডস আমি সম্মত হলাম এটি ডক্টাইপ নিয়ে কাজ করবে তবে আমি মনে করি এটি সম্পূর্ণরূপে এসও এর উপরও রয়েছে।

— টিএম

Answer 1

ব্যবহার করে দেখুন white-space: nowrap;। । ।

Comments

এফওয়াইআই: এমডিএন এর ডক্সwhite-space অনুসারে , nowrapমানটি আইই 6+ তে সমর্থিত, যদিও অন্যান্য মানগুলি কেবল আই 8+ হয়

— ওয়াল্টার রোমান

Answer 2

দুজনের সমন্বয়ই float: left; white-space: nowrap;আমার পক্ষে কাজ করেছিল।

তাদের প্রত্যেকে স্বতন্ত্রভাবে পছন্দসই ফলাফল অর্জন করতে পারেনি।

Answer 3

আমি এর পিছনে যুক্তিটি জানি না, তবে আমি আমার পিতামাতার ধারকটি display:flexএবং সন্তানের পাত্রে সেট করেছিলাম display:inline-blockএবং তারা পিতামাতার ছাড়িয়ে যাওয়া বাচ্চাদের সম্মিলিত প্রস্থ সত্ত্বেও ইনলাইন থেকে যায়।

সঙ্গে খেলনা করার প্রয়োজন ছিল না max-width, max-height, white-space, বা অন্য কিছু।

আশা করি যে কাউকে সাহায্য করবে।

Comments

উপরে তালিকাভুক্ত অন্যান্য পন্থা না করলে এটি আমার পক্ষে কাজ করে। আমার যা দরকার ছিল তা ছিল display: flex। আর কিছুর দরকার ছিল না।

— HerrimanCoder

Answer 4

আপনি যদি ডিভের জন্য ন্যূনতম প্রস্থের বিষয়ে চিন্তা না করেন এবং সত্যিই কেবল ডিভটি পুরো পাত্রে প্রসারিত করতে চান না তবে আপনি এটি বামে ভাসতে পারেন - ভাসমান ডিভগুলি ডিফল্টরূপে তাদের বিষয়বস্তুগুলি সমর্থন করার জন্য প্রসারিত করুন:

<form>
    <div style="float: left; background-color: blue">
        <input type="button" name="blah" value="lots and lots of characters"/>
        <input type="button" name="blah2" value="some characters"/>
    </div>
</form>

Answer 5

যদি আপনার ডিভের একটি নির্দিষ্ট-প্রস্থ থাকে তবে এটি প্রসারিত হওয়া উচিত নয়, কারণ আপনি এর প্রস্থ স্থির করেছেন। তবে আধুনিক ব্রাউজারগুলি একটি min-widthসিএসএস সম্পত্তি সমর্থন করে।

আপনি সিএসএস এক্সপ্রেশন ব্যবহার করে বা স্বয়ংক্রিয় প্রস্থ ব্যবহার করে এবং ধারকটিতে স্পেসার অবজেক্ট রেখে পুরানো IE ব্রাউজারগুলিতে ন্যূনতম প্রস্থের সম্পত্তি অনুকরণ করতে পারেন। এই সমাধানটি মার্জিত নয় তবে কৌশলটি করতে পারে:

<div id="container" style="float: left">
  <div id="spacer" style="height: 1px; width: 300px"></div>
  <button>Button 1 text</button>
  <button>Button 2 text</button>
</div>

Answer 6

বোতামগুলিকে একই লাইনে থাকতে বাধ্য করা তাদের যে ডিভের মধ্যে রয়েছে তার নির্দিষ্ট প্রস্থের অতিক্রম করতে বাধ্য করে। পরিবর্তে নতুন ডিভ বোতামগুলি ধরে রাখবে এবং উভয় বোতামকে এক লাইনে থাকার জন্য প্রয়োজনীয় অনেক জায়গার নির্দিষ্ট প্রস্থ থাকবে।

এখানে একটি উদাহরণ:

<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
    <div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
       <button id="button1">1</button>
       <button id="button2">2</button>
    </div>
</div>

সীমানার বাইরে সামগ্রীর অংশের জন্য আপনি ওভারফ্লো সম্পত্তিটি বিবেচনা করতে চাইতে পারেন parentDiv।

শুভকামনা!