2016-10-04 10 views
5

मेरे पास इनलाइन-ब्लॉक तत्वों की एक पंक्ति है जिसमें सभी की ऑटो चौड़ाई है, इसलिए वे उनमें से प्रत्येक में अलग-अलग पाठ सामग्री के साथ-साथ कुछ पैडिंग के रूप में व्यापक रूप से आकर्षित होते हैं। इसके परिणामस्वरूप प्रत्येक तत्व की वास्तविक चौड़ाई में आंशिक पिक्सेल होते हैं।चौड़ाई सेट वाले ऑटो में आंशिक पिक्सेल को कैसे रोकें?

यह ठीक होगा, लेकिन प्रत्येक तत्व है कि तैयार की जा रही है जब पिक्सेल ग्रिड तक गठबंधन नहीं करने के लिए बहुत ही संवेदनशील है एक आइकन फ़ॉन्ट शामिल है, इसके बारे में उपपिक्सेल प्रतिपादन सिर्फ गंदा और धुँधली नज़र डालती है कि ग्लिफ़ की उत्पत्ति एक पूर्णांक में नहीं है पिक्सेल मान

दशमलव पिक्सेल मानों को रोकने के दौरान मैं इन तत्वों की चौड़ाई को गतिशील कैसे रख सकता हूं? उदाहरण के लिए, तत्वों में से एक चौड़ाई 60.183px के साथ समाप्त होता है जब मैं इसे 61px तक गोल करना चाहता हूं। सास ciel() कर सकता है, जो सही होगा, लेकिन ऑटो मूल्यों पर इसे लागू करने का कोई तरीका नहीं है।

या वैकल्पिक रूप से, क्या कोई तरीका है कि मैं यह सुनिश्चित कर सकता हूं कि आइकन ग्लाइफ की उत्पत्ति एक पूर्ण पूर्णांक पिक्सेल है जिसमें कंटेनर चौड़ाई को गोल किए बिना?

इन तत्वों का उपयोग करने के तरीके के कारण मैं जेएस के साथ ऐसा करने से बचाना चाहता हूं और सीएसएस/एसएएसएस केवल समाधान ढूंढना चाहता हूं।

+0

[सीएसएस का संभावित डुप्लिकेट पूर्ण संख्या पिक्सेल पर प्रतिशत मानों का दौर कैसे करें] (http://stackoverflow.com/questions/22191086/css-how-to-round-of-percent-values-to-whole- संख्या-पिक्सेल) – Serlite

+0

हम्म, यह एक समान प्रश्न है लेकिन वास्तव में इस मुद्दे को हल करने वाले उत्तरों या टिप्पणियों में से कोई भी नहीं है। यहां असली मुद्दा यह है कि आइकन को पूर्णांक पिक्सेल उत्पत्ति की आवश्यकता होती है, और जहां तक ​​मैं इसे पूरा करने का एकमात्र तरीका बता सकता हूं वह कंटेनर की चौड़ाई को गोल करके है। – Kris

+0

उस प्रश्न का मुख्य अधिग्रहण यह है कि केवल सीएसएस का उपयोग करके बल गोल करना संभव नहीं है। आइकन फोंट को प्रस्तुत करने पर इस प्रश्न को पढ़ने के लायक हो सकता है, हालांकि: http://stackoverflow.com/questions/12642991/using-an-icon-font-font-awesome-looks-a-little-blurred-and-too- बोल्ड – Serlite

उत्तर

10

मुझे पता चला है कि यदि आप प्रदर्शन का उपयोग करते हैं: इनलाइन-टेबल; प्रदर्शन के बजाय: इनलाइन-ब्लॉक; यह सटीक पिक्सेल चौड़ाई/ऊंचाइयों को प्रस्तुत करने के लिए मजबूर करेगा। यह आपकी समस्या को ठीक कर सकता है हालांकि तालिका/इनलाइन-टेबल का उपयोग करके कुछ ब्राउज़रों में कंटेनर पतन के भीतर जगह बन जाएगी ताकि आपको सामग्री को किसी अन्य तत्व में लपेटना पड़े।

+0

बहुत बढ़िया! बस आपको बताने के लिए: मैंने 9 टाइम्स को ऊपर उठाया। यह भी पिक्सेल फोंट और स्वचालित witdths/मार्जिन के साथ एक बुरा समस्या को हल करता है। – Chris

+0

यह काम करता है! _why_ में कोई अंतर्दृष्टि यह काम करती है? – Kris

+0

@ क्रिस मुझे लगता है कि यह तालिका को प्रस्तुत करने की आवश्यकता के लिए बस नीचे है, टेबल अधिकांश तत्वों की तुलना में अधिक कठोर हैं क्योंकि सभी पंक्तियों/स्तंभों को उनके बीच किसी भी स्थान के बिना दिखाना चाहिए, इसलिए मुझे लगता है कि इसे एक पिक्सेल लेआउट को मजबूर करने की आवश्यकता है किसी भी उप पिक्सेल अंतराल से बचने के लिए। लेकिन मैं मानता हूं कि ज्यादातर अटकलें हैं, मुझे यह जानने में दिलचस्पी होगी कि किसी और की कोई अन्य अंतर्दृष्टि है या नहीं। – Steve

संबंधित मुद्दे