/ उत्तरदायी डिजाइन के लिए / ऑटो-आकार के बटन - सीएसएस, आकार, उत्तरदायी-डिजाइन

उत्तरदायी डिजाइन के लिए स्वत: आकार बदलें बटन - सीएसएस, आकार बदलें, उत्तरदायी डिजाइन

क्या उत्तरदायी डिजाइन करने के लिए अपने कंटेनर को फिट करने के लिए ऑटो-आकार बदलने वाले बटन हैं?

यह बेहतर होगा कि मुझे लगता है कि यदि कोई दृष्टिकोण है, तो मीडिया प्रश्नों पर आधारित नहीं है (= कम कोड)

आशा है कि छवि आपकी मदद करेगी। यहां बटन के लिए सीएसएस है

.formButtonfront {
width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;
}

ब्राउज़र एक लैपटॉप में क्रोम है, बस नीचे आकार है

मैं सफेद कंटेनर को फिट करने के लिए ग्रे बटन (छवि के बाद रखा गया) चाहता हूं

अग्रिम में धन्यवाद

पुनश्च फ्लोट के बारे में: मेरे पास ए clear:both; पाद में। इसके अलावा, भले ही मैं फ्लोट को हटा दूं, परिणाम समान है

अद्यतन करें यहाँ एक है jsfiddle

यहां छवि विवरण दर्ज करें

उत्तर:

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

तो आप डॉन 'टी की जरूरत है display: block या float: none, लेकिन ए max-width

.formButtonfront {
border:1px solid gray;
border-radius:7%;
font-size:0.875;
word-wrap: break-word;
width: 100px; // only for IE8
max-width: 100%;
}

इसे देखो बेला (मैं यह कैसे दिखता है यह देखने के लिए सामग्री का आकार कम करता हूं)


जवाब के लिए 2 № 2

बनाना float: none तथा display: block उस बटन के लिए।

यह कंटेनर के रूप में बटन बनाएगा और मूल बॉक्स को फिट करेगा।

मुझे लगता है कि यह आपकी मदद करेगा।