অনুভূমিক সারিতে <ul> প্রদর্শন কীভাবে করবেন

Question

আমি কীভাবে আমার তালিকা আইটেমগুলিকে সিএসএস ব্যবহার করে একের পর এক অনুভূমিকভাবে হাজির করতে পারি?

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Comments

ভাল প্রশ্ন. আমি মনে করি এখানে ফোকাসটি হ'ল সাম্প্রতিক ওয়েব মানগুলির সাথে সামঞ্জস্য রেখে এটি কীভাবে করা যায়

— অ্যান্ডি

Answer 1

তালিকা আইটেমগুলি সাধারণত উপাদানগুলিকে ব্লক করে। displayসম্পত্তির মাধ্যমে তাদের ইনলাইন উপাদানগুলিতে পরিণত করুন ।

আপনি যে কোডটি দিয়েছেন display: inlineতাতে আপনার তালিকার পরিবর্তে সম্পত্তিটিকে তালিকার আইটেমগুলিতে প্রয়োগ করার জন্য একটি প্রসঙ্গ নির্বাচনকারী ব্যবহার করতে হবে ( display: inlineসামগ্রিক তালিকায় প্রয়োগের কোনও প্রভাব পড়বে না):

#ul_top_hypers li {
    display: inline;
}

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

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Comments

আমি ফ্লোট ব্যবহার করে এই প্রভাবটি অর্জন করেছি, যার ফলে তালিকার আইটেমগুলির ব্লক প্রকৃতি রেখেছি।

— জোয়েল

এটি একটি আকর্ষণীয় পদ্ধতির, আমাকে বলতে হবে — তবে, আমি মনে করি এটি মার্জিন এবং এ জাতীয় কিছু অপ্রয়োজনীয় ঝামেলা তৈরি করবে, যেহেতু আপনি তালিকা মডেলটির বাইরে তালিকার আইটেমগুলি কার্যকরভাবে তুলে ধরছেন।

— এইচবিডাব্লু

@ এইচটিডাব্লু: আপনি ক্লিয়ারফিক্স সমাধানগুলির সাথে এটি গিয়ারে ফিরে আসতে পারেন।

— অ্যালেক্স

আপনি সর্বদা প্রদর্শনটি ব্যবহার করতে পারেন: আপনি যদি ব্লকের প্রকৃতি ধরে রাখতে চান তবে ইনলাইন-ব্লক ... যদিও এই পর্যায়ে এটি সম্পূর্ণরূপে সমর্থিত নয় (আমি বিশ্বাস করি এটি Fx2 যা প্রধান অপরাধী)।

— জেমস বি

Answer 2

আপনি এগুলি ডানদিকে ভাসতে সেট করতে পারেন।

#ul_top_hypers li {
    float: right;
}

এটি তাদের এখনও ব্লক স্তর হতে দেয় তবে একই লাইনে প্রদর্শিত হবে।

Comments

ডানদিকে তাদের ভাসমানের একটি অতিরিক্ত প্রভাব পড়বে: এটি তাদের ক্রমটি সোয়েপ করবে তাই বাম থেকে ডানে তারা প্রথম থেকে শেষ পর্যন্ত থাকবে।

— ম্যাথু জেমস টেলর

হ্যাঁ, তাদের মার্কআপে বিপরীত হওয়া দরকার (লেআউট / মার্কআপ পৃথক করার জন্য এত কিছু!)

— অ্যালেক্স

Answer 3

আপনি যে তালিকায় এটি প্রয়োগ করতে চান তার জন্য displayসম্পত্তি সেট করুন inline। সেখানে তালিকা প্রদর্শন একটি ভাল ব্যাখ্যা একটি পৃথক্ তালিকা ।

Answer 4

হিসাবে @alex বলেন, আপনি পারে এটা সঠিক ভাসা, কিন্তু আপনি যদি মার্কআপ একই রাখতে চেয়েছিলেন, এটা বাম ভাসা!

#ul_top_hypers li {
    float: left;
}

Answer 5

এটি আপনার পক্ষে কাজ করবে:

#ul_top_hypers li {
    display: inline-block;
}

Answer 6

অন্যদের হিসাবে উল্লেখ করেছি, আপনি সেট করতে পারেন liথেকে display:inline;, অথবা বাম বা ডান। উপরন্তু, এছাড়াও আপনি ব্যবহার করতে পারেন উপর । নীচের স্নিপেটে আমি এটি আরও ফাঁক দেওয়ার জন্য যুক্ত করেছি ।floatlidisplay:flex;uljustify-content:space-around

ফ্লেক্সবক্স সম্পর্কিত আরও তথ্যের জন্য, এই সম্পূর্ণ গাইডটি চেকআউট করুন ।

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Answer 7

#ul_top_hypers li {
  display: flex;
}