ठीक है, इसलिए मैं शुरुआत कर रहा हूं, और मैं कुछ सूची वस्तुओं को एक निश्चित तरीके से प्रारूपित करने का प्रयास कर रहा हूं। यहां एक उदाहरण है कि मैं चीजों को कैसे सूचीबद्ध करना चाहता हूं।

मैंने ऐसा करने के कुछ तरीके आजमाए। मेरा पहला प्रयास:

#ingredients {
  list-style-type: none;
}
<ul id="ingredients">
  <li>1. 8 oz. Gram flour</li>
  <li>1 tsp baking powder</li>
  <li>1 tsp curry powder</li>
  <li>½ tsp salt</li>
  <li>2. 2 eggs (separated)</li>
  <li>2 oz. of melted butter</li>
  <li>3. 1 ½ cup of water</li>
</ul>

लेकिन मैंने पाया कि फ़ॉर्मेटिंग बिल्कुल सही नहीं थी। तब मैंने यह कोशिश की:

<ol id="ingredients">
  <li>8 oz. Gram flour 1 tsp baking powder 1 tsp curry powder ½ tsp salt</li>
  <li>2 eggs (separated) 2 oz. of melted butter</li>
  <li>3. 1 ½ cup of water</li>
</ol>

लेकिन स्पष्ट रूप से ग्रंथ क्षैतिज रूप से प्रदर्शित होते हैं।

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

मैंने प्रत्येक सूची आइटम की सामग्री के भीतर एक सरणी रखने के लिए जावास्क्रिप्ट का उपयोग करने के बारे में सोचा, लेकिन मैं वास्तव में इसे काम करने के लिए नहीं मिला ...

इसे जिस तरह से मैं चाहता हूं उसे प्रारूपित करने के बारे में कोई सलाह।

0
Jennos 26 पद 2017, 18:53

5 जवाब

सबसे बढ़िया उत्तर

मेरी समझ से, आप नेस्टेड सूचियाँ बनाने का प्रयास कर रहे हैं। पहला एक ordered है और एक के अंदर एक unordered list है।

मुझे लगता है कि आप यही खोज रहे हैं।

ul {
    list-style-type: none;
    padding-bottom: 10px;
}
<ol>
  <li>
    <ul>
      <li>8 oz. Gram flour</li>
      <li>1 tsp baking powder</li>
      <li> 1 tsp curry powder</li>
      <li>½ tsp salt</li>    
    </ul>
  </li>
  <li>
    <ul>
      <li>2 eggs (separated)</li>
      <li> 2 oz. of melted butter</li>
      <li>3. 1 ½ cup of water</li>
    </ul>
  </li>
  <li>
     <ul>
       <li>Next sub-list item</li>
       <li>Next sub-list item</li>
       <li>Next sub-list item</li>
     </ul>
  </li>
</ol>
3
Siraj Alam 26 पद 2017, 19:14

आप "सूची के अंदर सूची" प्रारूप का उपयोग इस तरह कर सकते हैं:

#ingredients li {
  list-style-type: none;
}

ol {
  padding-bottom: 1em;
}
<ol>
  <li>
    <ol id="ingredients">
      <li>1. 8 oz. Gram flour</li>
      <li>1 tsp baking powder</li>
      <li>1 tsp curry powder</li>
      <li>½ tsp salt</li>
      <li>2. 2 eggs (separated)</li>
      <li>2 oz. of melted butter</li>
      <li>3. 1 ½ cup of water</li>
    </ol>
  </li>
  <li>
    <ol>(Step 2)</ol>
  </li>
</ol>
0
freginold 26 पद 2017, 19:03

आप ol और ul के मिश्रण का उपयोग कर सकते हैं और ul की पैडिंग पर नियंत्रण जोड़ सकते हैं ताकि उप-आइटम और उनके माता-पिता द्वारा ऑर्डर की गई सूची आइटम के बीच की दूरी को समायोजित किया जा सके।

एचटीएमएल:

<ol>
  <li>
    <ul>
      <li>Item 1.1</li>
      <li>Item 1.2</li>
      <li>Item 1.3</li>
      <li>Item 1.4</li>
    </ul>
  </li>  
  <li>
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
      <li>Item 2.4</li>
      <li>Item 2.5</li>
    </ul>
  </li>  
</ol>

सीएसएस:

ol li ul{
      padding-left: 7px; /* The distance between list number and item */
    }
    ol li ul li{
      list-style: none;      
    }

डेमो

0
SaidbakR 26 पद 2017, 19:08

इसमें अपना सीएसएस बदलें:

ul#ingredients li { display: block; }

यह ऐसा कर देगा ताकि सूची के तत्व अलग-अलग लाइनों पर हों और एक दूसरे के बगल में न हों। मुझे विश्वास है कि आप यही करना चाहते थे, है ना?

0
freginold 26 पद 2017, 21:28

आप अपना परिणाम नीचे की तरह प्राप्त करने के लिए नेस्टेड लिस्टिंग संरचना का प्रयास कर सकते हैं

#ingredients {
  margin: 0;
  padding-left: 20px;
}

#ingredients>li {
  padding-left: 20px;
}

#ingredients>li>ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 15px;
}
<ol id="ingredients">
  <li>
    <ul>
      <li>1. 8 oz. Gram flour</li>
      <li>1 tsp baking powder</li>
      <li>1 tsp curry powder</li>
      <li>½ tsp salt</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>2. 2 eggs (separated)</li>
      <li>2 oz. of melted butter</li>
      <li>3. 1 ½ cup of water</li>
    </ul>
  </li>
</ol>
0
Bhuwan 28 पद 2017, 10:55