दिलचस्प पोस्ट

कैसे दो स्तंभों में एक unordered सूची प्रदर्शित करने के लिए?

निम्न HTML के साथ, सूची को दो स्तंभों के रूप में प्रदर्शित करने के लिए सबसे आसान तरीका क्या है?

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

वांछित प्रदर्शन:

 AB CD E 

समाधान इंटरनेट एक्सप्लोरर पर सक्षम होने की आवश्यकता है।

Solutions Collecting From Web of "कैसे दो स्तंभों में एक unordered सूची प्रदर्शित करने के लिए?"

आधुनिक ब्राउज़र्स

आप के लिए क्या देख रहे हैं इसका समर्थन करने के लिए सीएसएस 3 कॉलम मॉड्यूल का लाभ उठाएं।

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

सीएसएस:

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

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

विरासत ब्राउज़र्स

दुर्भाग्य से आईई समर्थन के लिए आपको एक कोड समाधान की आवश्यकता होगी जिसमें जावास्क्रिप्ट और डोम हेरफेर शामिल है। इसका मतलब यह है कि कभी भी सूची की सामग्री बदलती है, आपको कॉलम में सूची की पुनर्रचना और पुनर्मुद्रण के लिए ऑपरेशन करने की आवश्यकता होगी। समाधान नीचे संक्षेप के लिए jQuery का उपयोग करता है।

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

HTML:

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

जावास्क्रिप्ट:

 (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; } 

संपादित करें:

जैसा कि नीचे बताया गया है, स्तंभों को निम्नानुसार आदेश दिया जाएगा:

 AE BF CG D 

जबकि ओपी ने निम्न से मेल खाने वाले एक संस्करण के लिए कहा:

 AB CD EF G 

संस्करण को पूरा करने के लिए आप केवल निम्नलिखित कोड को बदलते हैं:

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

मैं @ जेडर के समाधान पर काम कर रहा था जो काम कर रहा था, लेकिन मैं थोड़ा अलग दृष्टिकोण पेश कर रहा हूं जो मुझे लगता है कि इसके साथ काम करना अधिक आसान है और जो मैंने ब्राउज़र भर में अच्छा प्रदर्शन किया है।

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

डिफ़ॉल्ट रूप से अनुक्रमित सूची में बुलेट स्थिति बाहर प्रदर्शित होती है, लेकिन फिर कुछ ब्राउज़रों में यह आपकी वेबसाइट को बिछाने के ब्राउज़र के तरीके के आधार पर कुछ प्रदर्शन समस्याएं पैदा करेगा।

इसे प्रारूप में प्रदर्शित करने के लिए:

 AB CD 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; } 

यह आपके सभी समस्याओं को स्तंभों को प्रदर्शित करने के साथ हल करना चाहिए। आपकी प्रतिक्रिया के रूप में शुभकामनाएं और धन्यवाद @जाइडर ने मुझे इसकी खोज करने में मदद की।

मैंने इसे एक टिप्पणी के रूप में पोस्ट करने की कोशिश की, लेकिन कॉलम सही प्रदर्शित करने के लिए (आपके प्रश्न के अनुसार) नहीं मिल सका।

आप इसके लिए पूछ रहे हैं:

एबी

सीडी

… लेकिन समाधान के रूप में स्वीकार किए गए जवाब वापस आ जाएगा:

BE

सी

… तो या तो जवाब गलत है या सवाल है

एक बहुत ही सरल उपाय अपने <ul> की चौड़ाई को सेट करना होगा और फिर फ्लोट और अपने <li> वस्तुओं की चौड़ाई को सेट करना होगा।

 <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> ul{ width:210px; } li{ background:green; float:left; height:100px; margin:0 10px 10px 0; width:100px; } li:nth-child(even){ margin-right:0; } 

यहाँ उदाहरण http://jsfiddle.net/Jayx/Qbz9S/1/

यदि आपका प्रश्न गलत है, तो पिछला उत्तर (आईई समर्थन की कमी के लिए जे एस फिक्स के साथ) लागू होते हैं

मुझे आधुनिक ब्राउज़र के लिए समाधान पसंद है, लेकिन गोलियां गायब हैं, इसलिए मैं इसे थोड़ा चाल जोड़ता हूं:

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

 ul { list-style-type: none; columns: 2; -webkit-columns: 2; -moz-columns: 2; } li:before { content: "• "; } 

यहां छवि विवरण दर्ज करें

यहां एक संभव समाधान है:

स्निपेट:

 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> 

ऐसा करने का सबसे आसान तरीका यह है केवल सीएसएस

  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> 

यह पेरेंट डिव पर कॉलम-गिनती सीएसएस प्रॉपर्टी का उपयोग करके प्राप्त किया जा सकता है,

पसंद

  column-count:2; 

अधिक जानकारी के लिए इसे देखें

फ़्लोटिंग डीआईवी सूची कैसे बनायी जाती है, स्तंभों में नहीं, पंक्तियों में नहीं

कुछ वर्षों के बाद एक और जवाब!

इस अनुच्छेद में: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

HTML:

 <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%; } 

updateColumns() if (column >= columns.length) updateColumns() आवश्यकता है if (column >= columns.length)updateColumns() की बजाय सभी (तत्व उदाहरण के लिए छोड़ दिया है) तत्वों को सूचीबद्ध करने के लिए if (column > columns.length) है:

 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/

आप ऐसा कर सकते हैं वास्तव में jQuery- कॉलम प्लगइन के साथ आसानी से उदाहरण के लिए एक वर्ग के साथ एक उल विभाजन करने के लिए। Mylist आप करेंगे

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

यहां jsfiddle पर एक लाइव उदाहरण है

मुझे यह सीएसएस के मुकाबले बेहतर पसंद है क्योंकि सीएसएस समाधान के साथ सब कुछ शीर्ष पर खड़ी नहीं है

बूटस्ट्रैप के साथ … यह उत्तर ( https://stackoverflow.com/a/23005046/1128742 ) ने मुझे इस समाधान की ओर इशारा किया:

 <ul class="list-unstyled row"> <li class="col-xs-6">Item 1</li> <li class="col-xs-6">Item 2</li> <li class="col-xs-6">Item 3</li> </ul> 

http://jsfiddle.net/patrickbad767/472r0ynf/

शीर्ष उत्तर में विरासत समाधान मेरे लिए काम नहीं करता क्योंकि मैं पृष्ठ पर कई सूचियों को प्रभावित करना चाहता था और उत्तर एक सूची को ग्रहण करता है और साथ ही यह वैश्विक स्थिति का एक उचित बिट का उपयोग करता है इस मामले में मैं हर सूची को <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]); } }); 

यह मेरे लिए एक आदर्श समाधान था, इसे वर्षों तक देख रहा था:

http://css-tricks.com/forums/topic/two-column-unordered-list/