रखें मेरे पास एक अनॉर्डर्ड सूची वाला एक HTML फ़ाइल है। मैं सूची आइटम क्षैतिज रूप से दिखाना चाहता हूं लेकिन फिर भी गोलियां रखता हूं। कोई फर्क नहीं पड़ता कि मैं क्या प्रयास करता हूं, जब भी मैं क्षैतिज आवश्यकता को पूरा करने के लिए शैली को सेट करने के लिए शैली सेट करता हूं तो मुझे गोलियों को प्रदर्शित करने के लिए नहीं मिल सकता है।अनॉर्डर्ड सूची इनलाइन दिखाएं, लेकिन गोलियां
अन्य उत्तरों में मैंने देखा सबसे अच्छा विकल्प float:left; का उपयोग करना था। दुर्भाग्यवश, यह आईई 7 में काम नहीं करता है, जो यहां एक आवश्यकता है * — आप अभी भी बुलेट खो देते हैं। मैं पृष्ठभूमि छवि का उपयोग करने के लिए वास्तव में उत्सुक नहीं हूं।
इसके बजाय मैं क्या कर रहा हूं (कि कोई और सुझाव नहीं दिया गया है, इसलिए स्वयं उत्तर) मैन्युअल रूप से • को अपने एचटीएमएल में जोड़ने के बजाय, इसे स्टाइल करने के साथ जा रहा है। यह आदर्श से कम है, लेकिन यह मुझे मिला सबसे अनुकूल विकल्प है।
संपादित: * वर्तमान पाठकों मूल पोस्ट की तारीख को ध्यान में रखना। आईई 7 अब चिंता का विषय नहीं है।
क्या आपने <li/> पर float: left को आजमाया है? कुछ ऐसा:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
मैंने केवल फ़ायरफ़ॉक्स 3.0.1 का परीक्षण किया, वहां काम करता है। margin सेट है क्योंकि अन्यथा आपकी बुलेट पिछले आइटम को ओवरलैप करती है।
अतिरिक्त: सावधान रहें कि जब आप आइटम को फ़्लोट करते हैं तो आप उन्हें सामान्य प्रवाह से हटा देते हैं, जिससे बदले में <ul/> कोई ऊंचाई नहीं होती है। यदि आप सीमा या कुछ जोड़ना चाहते हैं, तो आपको अजीब परिणाम मिलेंगे।
एक तरीका यह है कि ठीक करने के लिए अपनी शैली के लिए निम्न जोड़ने के लिए है:
ul {
overflow: auto;
background: #f0f;
}
यह मैं मदद की। फ्लोट चाल थी। – Maddhacker24
तुम भी एक पृष्ठभूमि छवि < ली पर > तत्वों, एक गद्दी के साथ इस्तेमाल कर सकते हैं यह ओवरलैपिंग से पाठ रखने के लिए।
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
दुर्भाग्यवश ग्राफिकल बुलेट बिंदुओं का उपयोग करना इस समय एक बहुत अच्छा समाधान नहीं है क्योंकि जब उपयोगकर्ता टेक्स्ट ज़ूम करता है, तो इन छवियों को तदनुसार स्केल नहीं किया जाएगा (या बदतर, पिक्सलेटेड)। हम उम्मीद कर सकते हैं कि कुछ सालों में यह कोई मुद्दा नहीं होगा (वेक्टर ग्राफिक्स का उपयोग करके और छवियों और पाठ को समान रूप से स्केल करने के लिए वेब ब्राउज़र पर निर्भर)। –
ब्राउज़र गोलियों को प्रदर्शित करता है क्योंकि स्टाइल प्रॉपर्टी "डिस्प्ले" प्रारंभ में "सूची-वस्तु" पर सेट होती है। डिस्प्ले प्रॉपर्टी को "इनलाइन" में बदलना आइटम की सूची वाली सभी विशेष शैलियों को रद्द करता है। चयनकर्ता और सामग्री संपत्ति से पहले, आपको इसे अनुकरण करने में सक्षम होना चाहिए, लेकिन IE (कम से कम संस्करण 7 के माध्यम से) उनका समर्थन नहीं करता है। इसे पृष्ठभूमि छवि के साथ सिमुलेट करना संभवतः यह करने का सबसे अच्छा क्रॉस-ब्राउज़र तरीका है।
उन्हें अवरुद्ध प्रदर्शित रखें, उन्हें चौड़ाई दें और बाईं ओर तैरें।
इससे उन्हें एक तरफ बैठेगा, जो इनलाइन की तरह है, और सूची शैली को बनाए रखना चाहिए।
आपका मतलब है * डिस्प्ले: सूची-आइटम * के बजाय * डिस्प्ले: ब्लॉक * –
मैं एक ही समस्या थी, लेकिन केवल इंटरनेट एक्सप्लोरर में (मैं संस्करण 7 का परीक्षण) - नहीं Firefox 3 या सफारी 3. में का उपयोग करना: पहले चयनकर्ता मेरे लिए काम करता है:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
मैं मैं यहां एक स्क्वायर बुलेट का उपयोग कर रहा हूं, लेकिन एक सामान्य बुलेट \ 2022 वही काम करेगा।
से पहले भी जोड़ना चाहेंगे ... सिवाय इसके कि यह आईई 7 में भी काम नहीं करता है, क्योंकि इससे चयनकर्ता से पहले नहीं है:। –
आप कोड
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
यह वास्तव में एक बहुत ही सरल ठीक है निम्न का उपयोग कर सकते हैं। उल में निम्नलिखित जोड़ें:
display:list-item;
इस सीएसएस लाइन को जोड़ना बुलेट पॉइंट जोड़ देगा।
यदि आप अन्य उत्तरों/टिप्पणियों के माध्यम से पढ़ते हैं, तो आप देखेंगे कि उस समय एक आवश्यक ब्राउज़र द्वारा समर्थित नहीं था। अब ... यह ठीक काम कर सकता है। –
आप चरित्र संस्थाओं इस्तेमाल कर सकते हैं, को देखने के संदर्भ: http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
मैं सिर्फ चारों ओर खिलवाड़ किया गया था और मैं एक ही ब्राउज़र की कमी के साथ एक ही मुद्दा में भाग; जब मैंने एक उत्तर खोजा तो आपकी पोस्ट उत्तर के बिना आई। आपकी मदद करने में शायद यह बहुत देर हो चुकी है, लेकिन मैंने पोस्टरिटी के लिए सोचा था कि मुझे इसे पोस्ट करना चाहिए।
मैंने अपनी समस्या को हल करने के लिए पहली सूची के प्रत्येक सूची आइटम के भीतर एक आइटम के साथ एक और सूची एम्बेड करना था; की तरह तो ...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
सीएसएस:
.block-list > ul > li { display: inline; float: left; }
IE7 पृष्ठ:
o a o b o c
... यह एक गूंगा समाधान है, लेकिन यह लगता है काम।
HTML में, मैं इस तरह प्रत्येक ली एक ब्रेक के बाद कहा:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
और सीएसएस:
li { float:left; }
यदि मैं सूची में सबकुछ चुनता हूं और कॉपी करता हूं तो मुझे पेस्ट करते समय अपने टेक्स्ट में HTML बुलेट प्राप्त होते हैं। कुल। मुझे वैकल्पिक पसंद है: पृष्ठभूमि छवि का उपयोग करना। – Matthew
@ मैथ्यू - उस समय एक विकल्प नहीं था। समाधान 4 वर्षों में अपनाया गया था क्योंकि यह सबको आईई 8 में ले जाना था, जहां अधिक सेन विकल्प उपलब्ध थे। –
पुराने भूत लाने के लिए खेद है (मुझे पता है कि आईई 7 थोड़े डरावना हो सकता है)। मैंने इसे Google खोज के माध्यम से पाया और सोचा कि मुझे उस बिंदु को लाना चाहिए। – Matthew