दिलचस्प पोस्ट
पायथन 3 में हेक्स स्ट्रिंग में बाइट्स कन्वर्ट करने का सही तरीका क्या है? क्रोम खींचने के दौरान पाठ को कर्सर सेट करते हैं, क्यों? वीसी ++ एप्लिकेशन के लिए क्रैश डंप का विश्लेषण करने के लिए WinDbg का उपयोग कैसे करें? अजाक्स अनुरोध समस्या: त्रुटि 80020101 Microsoft.Office.Interop.Word.Application का निपटान Outlook में डिफ़ॉल्ट हस्ताक्षर कैसे जोड़ें फायरबसे पर छवियों को कैसे संग्रहीत और देखना है? कैमरा सेवा से कनेक्ट करने में विफल वर्ग 'test_coredataAppDelegate' के लिए डुप्लिकेट इंटरफ़ेस घोषणा Excel में एक कॉलम में अद्वितीय मानों की गणना करें सी / सी + + स्रोत कोड विज़ुअलाइज़ेशन? जावास्क्रिप्ट में ऑब्जेक्ट में सरणी और मान सरणी को मिलाएं कैसे एक स्ट्रिंग के भीतर स्ट्रिंग के कई घटनाओं मिलान करने के लिए reg पूर्व का उपयोग कर Django सीएसआरएफ फ्रेमवर्क अक्षम नहीं किया जा सकता है और मेरी साइट को तोड़ रहा है पीएचपी कैसे स्थानीय आईपी प्रणाली को पाने के लिए

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

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

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

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

 AB CD E 

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

वेब के समाधान से एकत्रित समाधान "कैसे दो स्तंभों में एक 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/