क्या सीएसएस इन नेस्टेड सूची वस्तुओं के ओवरलैप को रोक देगा? - एचटीएमएल, सीएसएस, एचटीएमएल सूचियां

कृपया निम्न HTML / CSS को ए के रूप में देखें वेब पृष्ठ। यह चारों ओर सीमाओं के साथ एक रूपरेखा प्रदर्शित करता हैविभिन्न तत्व युक्त सूची जानबूझकर एक निश्चित चौड़ाई के भीतर क्षैतिज स्क्रॉलिंग के लिए अनुमति देता है। समस्या यह है कि जब आप रूपरेखा के बहुत दूर तक स्क्रॉल करते हैं, तो आप देख सकते हैं कि आंतरिक तत्वों की सीमाएं (सभी गर्म रंग) एक दूसरे को ओवरलैप करते हैं। वांछित प्रभाव यह है कि वे सभी तत्वों के साथ पूरी तरह से फ्लश (दाईं तरफ) हैं ताकि कोई ओवरलैप न हो। इसे पूरा करने के लिए सबसे सरल सीएसएस क्या है?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
width: 300px !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}
li, span {
padding: 0;
margin: 0;
}
#top {
border: solid 1px black;
}
#top > li {
overflow-x: auto;
overflow-y: hidden;
border: solid 1px yellow;
margin-left: -20px;
}
li {
display: block;
border: solid 1px red;
}
li, ul, span {
width: auto;
white-space: nowrap !important;
}
</style>
</head>
<body>

<ul id="top">
<li id="trunk">
<span>This is the trunk</span>
<ul>
<li><span>This is the first line item</span>
<ul>
<li><span>This is the first subitem</span><ul></ul></li>
<li><span>This is the second subitem</span><ul></ul></li>
<li><span>This is the third subitem</span><ul></ul></li>
</ul>
</li>
<li><span>This is the second line item</span><ul></ul></li>
<li><span>This is the third line item</span><ul></ul></li>
</ul>
</li>
</ul>

</body>
</html>

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

निम्न छवि नमूना रूपरेखा दिखाती है।ध्यान दें कि चौड़ाई तय की गई है और यदि उपयोगकर्ता उस शीर्षक को टाइप करता है जो दृश्यमान क्षेत्र में प्रदर्शित होने से अधिक लंबा है तो यह दाईं ओर स्क्रॉल कर सकता है। ध्यान दें कि हाइलाइट किए गए आइटम और उसके बच्चों को हल्के भूरे रंग में लपेटा गया है। डीबगिंग उद्देश्यों के लिए दाईं ओर कुछ नारंगी चिह्न हैं।

http://drop.io/dfhejyj/asset/outline-png

निम्नलिखित छवि एक ही रूपरेखा दिखाती हैदाईं ओर स्क्रॉल किया गया। स्क्रॉलिंग जानबूझकर है और इसे समाप्त नहीं किया जाना चाहिए। समस्या यह है कि जब मैं दाएं स्क्रॉल करता हूं तो शीर्षक वाले यूएल टैग (हल्के भूरे रंग में दिखाई देने) के बाहर खिताब निकलते हैं। इसी तरह, नारंगी चिह्नों के साथ। वांछित प्रभाव यह है कि नारंगी चिह्न और भूरे रंग का क्षेत्र हमेशा चुनिंदा क्षेत्र (स्क्रॉल बार द्वारा सीमित) के दाईं ओर फ्लश करेगा, और स्क्रॉलबार हमेशा रहेगा (जब तक कि शीर्षक में से कोई भी काफी लंबा हो इसे उत्पादन करने के लिए)।

http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png

DigruntedGoat का मूल्यांकन बिल्कुल सही है। हालांकि, मुझे एक सुधारात्मक दृष्टिकोण की आवश्यकता है। यह पुराने आईई ब्राउज़र द्वारा उपयोग किए गए टूटे हुए बॉक्स-मॉडल के साथ शायद अधिक आसानी से काम कर सकता है।

उत्तर:

उत्तर № 1 के लिए 1

वे प्रत्येक के रूप में ओवरलैप करते हैं <ul> तत्व 300px चौड़ाई पर सेट है, और यह भी एक है left-padding जो "कदम" देखो बनाता है। तो पहली सूची 0 से 300px क्षैतिज रूप से जाती है, जबकि दूसरी नेस्टेड सूची 20px से 320px तक जाती है, और इसी तरह।

मैं पूरी तरह से उस प्रभाव के बारे में निश्चित नहीं हूं जिसे आप प्राप्त करने की कोशिश कर रहे हैं (शायद आप एक नकली पोस्ट कर सकते हैं?) लेकिन शायद बाहरीतम पर चौड़ाई निर्धारित करना <ul> केवल (यानी #top चयनकर्ता) जो आप चाहते हैं वह करेगा।


उत्तर № 2 के लिए 1
li, span {
overflow: hidden;
}

डेमो

हालांकि यह बेहतर है:

#top {
width: 300px !important;
}
ul {
padding: 0 0 0 20px !important;
margin: 0 !important;
border: solid 1px orange;
height: auto;
overflow: visible;
}

डेमो


जवाब के लिए 0 № 3

मैं अंत में एक अतिरिक्त कंटेनर जोड़कर इसे हल करने में सक्षम था:

http://jsbin.com/itevo/2

सैम एच और डिसग्रंटेडगोट के लिए धन्यवाद जिन्होंने कुछ मार्गदर्शन देने के लिए समय निकाला। :)


संबंधित सवाल
सबसे लोकप्रिय