html কিভাবে দুটি কলামে একটি unordered তালিকা প্রদর্শন করতে?



css css3 (12)

নিম্নলিখিত এইচটিএমএল দিয়ে, তালিকার দুটি কলাম হিসাবে প্রদর্শন করার সবচেয়ে সহজ পদ্ধতি কী?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

পছন্দসই প্রদর্শন:

A B
C D
E

সমাধান ইন্টারনেট এক্সপ্লোরার কাজ করতে সক্ষম হতে হবে।


Answer #1

updateColumns() সমস্ত উপাদান তালিকাভুক্ত করার জন্য if (column > columns.length)updateColumns() if (column >= columns.length) পরিবর্তে if (column >= columns.length) updateColumns() প্রয়োজন if (column >= columns.length) উদাহরণস্বরূপ C কে উদাহরণ দেওয়া হয়) তাই:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column >= columns.length){
            column = 0;
        }
        console.log(column, el, idx);
        $(columns.get(column)).append(el);
        column += 1;
    });
}

http://jsfiddle.net/e2vH9/1/


Answer #2

আমি আধুনিক ব্রাউজারের সমাধান পছন্দ করি, কিন্তু বুলেটগুলি অনুপস্থিত, তাই আমি এটি একটি ছোট্ট কৌশল যোগ করি:

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}


Answer #3

আপনি jQuery- কলাম প্লাগইন দিয়ে এটি সত্যিই সহজেই করতে পারেন যেমন একটি ক্লাসের সাথে একটি উল বিভক্ত করতে।

$('.mylist').cols(2);

এখানে jsfiddle একটি লাইভ উদাহরণ

আমি সিএসএস এর চেয়ে ভাল পছন্দ করি কারণ সিএসএস সমাধান দিয়ে সবকিছু উপরের দিকে উল্লম্বভাবে সাজানো হয় না।



Answer #5

এটি করার জন্য সবচেয়ে সহজ উপায়। শুধুমাত্র সিএসএস।

  1. উল উপাদান প্রস্থ যোগ করুন।
  2. প্রদর্শন যোগ করুন: নতুন কলামের ইনলাইন-ব্লক এবং প্রস্থ (উল প্রস্থের অর্ধেকের কম হওয়া উচিত)।
ul.list {
  width: 300px;  
}

ul.list li{
  display:inline-block;
  width: 100px;
}
<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

Answer #6

আমি @ জাইডারের সমাধানটি দেখছিলাম যা কাজ করেছে কিন্তু আমি সামান্য ভিন্ন পদ্ধতির প্রস্তাব দিচ্ছি যা আমার মনে হয় যে কাজ করা আরও সহজ এবং যা ব্রাউজার জুড়ে ভাল দেখা যায়।

ul{
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition
}

ডিফল্ট অ-আদেশ তালিকাটি বাইরে বুলেট অবস্থান প্রদর্শন করে তবে তারপরে কিছু ব্রাউজারে এটি আপনার ওয়েবসাইটটি দেওয়ার ব্রাউজারের উপায়ের উপর ভিত্তি করে কিছু প্রদর্শন সমস্যা সৃষ্টি করবে।

বিন্যাসে প্রদর্শন করার জন্য:

A B
C D
E

ইত্যাদি নিম্নলিখিত ব্যবহার করুন:

ul li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
    list-style-type: disc;
}

এই কলাম প্রদর্শন সঙ্গে আপনার সব সমস্যার সমাধান করা উচিত। সব ভাল এবং ধন্যবাদ @ জাইদার আপনার প্রতিক্রিয়া আমাকে এটি আবিষ্কার করার জন্য গাইড করতে সাহায্য করেছে।


Answer #7

আধুনিক ব্রাউজার

আপনি খুঁজছেন কি সমর্থন করতে css3 কলাম মডিউল লিভারেজ।

http://www.w3schools.com/cssref/css3_pr_columns.asp

সিএসএস:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

উত্তরাধিকার ব্রাউজার

দুর্ভাগ্যক্রমে IE সমর্থন করার জন্য আপনাকে একটি কোড সমাধান দরকার যা জাভাস্ক্রিপ্ট এবং ডোম ম্যানিপুলেশন অন্তর্ভুক্ত করে। এর মানে হল তালিকার বিষয়বস্তুগুলিতে যেকোন সময় কলাম এবং পুনঃনির্মাণের তালিকাটিকে পুনর্বিন্যাস করার জন্য আপনাকে অপারেশনটি সম্পাদন করতে হবে। নীচের সমাধান সংক্ষিপ্তত্ব জন্য jQuery ব্যবহার করে।

http://jsfiddle.net/HP85j/19/

এইচটিএমএল:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

javascript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

সিএসএস:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

সম্পাদনা করুন:

নীচের দিকে নির্দেশিত হিসাবে কলাম অর্ডার নিম্নরূপ:

A  E
B  F
C  G
D

অপারেটিং সিস্টেমের অপেক্ষাকৃত অপেক্ষাকৃত অপেক্ষাকৃত অপেক্ষারত:

A  B
C  D
E  F
G

বৈকল্পিক সম্পন্ন করার জন্য আপনি কেবল নীচের কোডটি পরিবর্তন করুন:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

Answer #8

আপনি দুটি কলাম বা আরো সেট করতে শুধুমাত্র সিএসএস ব্যবহার করতে পারেন

বি

সি

ডি

 <ul class="columns">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul.columns  {
   -webkit-columns: 60px 2;
   -moz-columns: 60px 2;
    columns: 60px 2;
   -moz-column-fill: auto;
   column-fill: auto;
 }

Answer #9

কয়েক বছর পর আরও এক উত্তর!

এই নিবন্ধটিতে: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

এইচটিএমএল:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

সিএসএস:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;}
#triple li  { width:33.333%; }
#quad li    { width:25%; }
#six li     { width:16.666%; }

Answer #10

উপরের উত্তরের উত্তরাধিকার সমাধানটি আমার জন্য কাজ করে নি, কারণ আমি পৃষ্ঠাটিতে একাধিক তালিকা প্রভাবিত করতে চাই এবং উত্তরটি একটি একক তালিকা অনুমান করে এবং এটি বিশ্বব্যাপী ন্যায্য বিট ব্যবহার করে। এই ক্ষেত্রে আমি একটি <section class="list-content"> প্রতিটি তালিকা পরিবর্তন করতে চেয়েছিলেন: <section class="list-content">

const columns = 2;
$("section.list-content").each(function (index, element) {
    let section = $(element);
    let items = section.find("ul li").detach();
    section.find("ul").detach();
    for (let i = 0; i < columns; i++) {
        section.append("<ul></ul>");
    }
    let lists = section.find("ul");
    for (let i = 0; i < items.length; i++) {
        lists.get(i % columns).append(items[i]);
    }
});

Answer #11

এখানে একটি সম্ভাব্য সমাধান:

স্নিপেট:

ul {
  width: 760px;
  margin-bottom: 20px;
  overflow: hidden;
  border-top: 1px solid #ccc;
}
li {
  line-height: 1.5em;
  border-bottom: 1px solid #ccc;
  float: left;
  display: inline;
}
#double li {
  width: 50%;
}
<ul id="double">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

এবং এটা করা হয়।
3 কলামের জন্য li প্রস্থ 33% হিসাবে ব্যবহার করুন, 4 কলামের জন্য 25% এবং আরও কিছু ব্যবহার করুন।






css-multicolumn-layout