एक अनॉर्डर्ड सूची आइटम का पाठ संरेखण

Question

मुझे आश्चर्य है कि एक असाधारण सूची आइटम का टेक्स्ट बनाने के लिए कोई तरीका है मानक डिस्क/डॉट सूची आइटम आइकन के किनारे "कॉलम" के रूप में दिखाई देता है? स्क्रीनशॉट की एक जोड़ी बना दिया:

यह जब सूची आइटम के अंदर कुछ पाठ (ली) के साथ एक मानक बिना क्रम वाली सूची का उपयोग कर यह कैसे दिखता है:

और यह है कि कैसे मैं यह देखने के लिए चाहते हैं :

किसी भी छवि/div हैक्स के बिना यह संभव है? ;-) मैंने यह देखने के लिए चारों ओर खोज की है कि इसके लिए कोई मानक सीएसएस सेटिंग है या नहीं, लेकिन मुझे कोई भी प्रतीत नहीं होता।

बहुत पहले से धन्यवाद!

शुभकामनाएँ

,

बो

Answer 1

आप बस इसे इस तरह कोड कर सकते हैं:

एचटीएमएल

<ul> 
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    <li>Hello</li> 
    </ul> 

सीएसएस

ul{ 
    margin:0; 
    padding:0 20px; 
} 
ul li { 
    padding:0; 
    width:150px; 
    background:red; 
    margin:10px 0; 
} 

Answer 2

अपने सीएसएस कोड को यह

ul { 
    display:inline-block; 
} 

जोड़ें।

Answer 3

मैं चल बाईं ओर सूची आइटम लगता है बनाने के लिए सबसे अच्छा समाधान है वे कॉलम के रूप में दिखाई देते हैं।

यह सीएसएस कोड आप मदद कर सकते हैं:

<style type="text/css"> 
    ul > li { 
     margin: 0 10px; 
     width: 150px; 
     float: left; 
    } 
</style> 

Answer 4

list-style-position संपत्ति आप के लिए देख रहे हैं। यह सभी ब्राउज़रों में काम करता है। (अधिक जानकारी के लिए MDN देख)

ul { 
    list-style-position: outside; 
    /* You may want to add an additional padding-left: */ 
    padding-left: 1.5em; 
} 

लेकिन असल में outside यह डिफ़ॉल्ट मान है। आप शायद इसे कहीं और ओवरराइट करें।

Answer 5

यह सिर्फ < उल > टैग के तहत खुले (< ली >) और बंद (</li >) टैग के साथ पाठ चारों ओर का उपयोग करने के लिए पर्याप्त है।

उदाहरण के लिए,

<ul> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> 
    <li>This is list item - 2</li> 
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li> 
    <li>This is list item - 4</li> 
</ul> 

आउटपुट हो जाएगा,

• Lorem Ipsum मातम AMET बैठते हैं, consectetur adipiscing elit, SED कर eiusmod tempor incididunt ut labore एट dolore मैग्ना aliqua। इस साइट पर क्लिक करने के लिए, इस तरह के अभ्यास के लिए उपयोग करने के लिए आवेदन कर रहे हैं।
• यह सूची आइटम है - 2
• वॉल्यूपेट वेल्ट एस्से सिल्लम डोलोर ई फुगियाट नूला पारिएचर में पुनर्वितरण में ड्यूस अ्यूट इरूर डोलर। occaecat Excepteur Sint cupidatat गैर proident, प्रमाद qui officia deserunt mollit anim id est में sunt laborum
• इस सूची आइटम है - 4