कॉलम

Question

की चौड़ाई में एक बटन खींचने के लिए कैसे मैं एक कॉलम की चौड़ाई फैलाने की कोशिश कर रहा हूं।

उदा। यहां: http://davidnhutch.com। ध्यान दें कि हल्के भूरे रंग के बटन केवल उनके पाठ के रूप में बड़े होते हैं? मैं चाहता हूं कि प्रत्येक बटन उस कॉलम की चौड़ाई को फैलाए, लेकिन मेरे जीवन के लिए यह नहीं पता कि यह कैसे किया जाए। मैंने चारों ओर देखकर काफी कुछ किया है लेकिन अभी भी इसके लिए नया हूं।

कोई विचार?

Answer 1

आप उन्हें ब्लॉक तत्वों एक चौड़ाई सेट करने में सक्षम होना करना होगा:

.button { 
    display: block; 
    width: 100%; 
} 

Answer 2

width:100% जोड़ना .button के लिए केंद्र और पृष्ठ के तल पर सही बटन के लिए काम करने के लिए लगता है।

Answer 3

आम तौर पर, इन बटनों को तथाकथित "इनलाइन तत्व" कहा जाता है। ब्राउज़र रेंडरर में इन तत्वों को लेआउट करने के बहुत जटिल एल्गोरिदम हैं। यह Typesetting जैसा है लेकिन इसके बजाय आपकी स्क्रीन पर ऑब्जेक्ट्स के साथ।

सीएसएस और एचटीएमएल एक साथ प्रभाव डालता है कि एल्गोरिदम कैसे काम करता है: वस्तुओं की चौड़ाई और ऊंचाई, रंग इत्यादि का निर्धारण करना। इसके अलावा उनकी स्थिति और पाठ कैसे बहता है, या कितने लंबे बटन हैं।

हालांकि, एक सीमा है। आप इनलाइन तत्वों के लिए एक चर चौड़ाई की तरह कुछ भी उपयोग नहीं कर सकते हैं।

width: 100%; display: block जोड़कर अन्य सुझाव दिए गए हैं कि कुछ बटन सही हैं: लेकिन केवल जब वे युक्त बॉक्स के बाएं या दाएं ओर शुरू होते हैं। यदि यह एक वाक्य के बाद है, तो यह (चाहिए) प्रदर्शन के रूप में:

<---width of container---> 
Text 
<----------button--------> 

हालांकि, बटन नहीं "पाठ" के बाद अब और है, लेकिन यह नीचे डाल दिया है। ऐसा इसलिए है क्योंकि अब यह एक तथाकथित "ब्लॉक तत्व" है। यह टेक्स्ट लाइन में तत्वों के बजाय, पूर्ण अनुच्छेद की तरह है।

यदि आप यही चाहते हैं; ठीक है और समस्या हल हो गई है। यदि यह नहीं है कि आप क्या चाहते, और बदले हैं:

<---width of container---> 
Text <-------button------> 

यह संभव नहीं है। _{सीसीएस 4 ठंडा होगा अगर यह inline-width: 100% या inline-height जोड़ता है, और कई समस्याएं हल करता है। हालांकि सीएसएस 4 अभी तक मौजूद नहीं है।}