2013-02-27 19 views
10

तो मेरे पास एक मूल बटन क्लास है जो साइट पर विभिन्न बटनों पर एक ही स्टाइल लागू करती है।एचटीएमएल एंकर और उसी सीएसएस शैली के साथ इनपुट बटन, लेकिन विभिन्न आयाम

मुझे एक फॉर्म इनपुट डालने और एक दूसरे के बगल में एक एंकर टैग डालना पड़ा, और उनकी ऊंचाई और चौड़ाई अलग है। मैंने प्रत्येक के लिए आंतरिक बटन टेक्स्ट को समान रूप से दिखाने के लिए समान बना दिया है (स्पष्ट रूप से मुझे एक दूसरे के बगल में 2 'जोड़ें' बटन की आवश्यकता नहीं है: पी)

मैं चौड़ाई निर्दिष्ट नहीं करना चाहता, या सामग्री के रूप में सीएसएस में ऊंचाई बदल जाएगी। यहां तक ​​कि फ़ॉन्ट थोड़ा अलग आकार का दिखता है, और बॉक्स मॉडल से ऐसा लगता है कि पैडिंग ठीक है।

http://jsfiddle.net/aeD4Z/2/

मार्कअप

<form id="" method="POST" action=""> 
<input class="button" type="submit" name="submit" value="Add"> 
</form> 

<a class="button" href="">Add</a> 

सीएसएस

.button { 
    font-family: Arial; 
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #F07605; 
    border-radius: 0.5em 0.5em 0.5em 0.5em; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    color: #FFFFFF; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 13px; 
    font-weight: bold; 
    line-height: 13px; 
    outline: medium none; 
    padding: 5px 8px !important; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); 
    vertical-align: baseline; 
} 

संपादित करें: आप फ़ायरबग में देख सकते हैं नीचे यह गद्दी नहीं है, बॉक्स मॉडल के रूप में गद्दी दिखाने प्रत्येक के लिए समान है, इसलिए वास्तविक तत्व के साथ यह कुछ है

Box model for input and anchor

कैसे मैं दोनों के ऊपर मेरी जे एस बेला में एक भी CSS वर्ग से एक ही आयाम होने के लिए मिलता है?

+0

जब आप फ़ायरबग या कुछ समान तत्व के साथ तत्व का निरीक्षण करते हैं तो आपको तत्वों पर ब्राउज़र सेट डिफ़ॉल्ट शैलियों भी मिलेंगे। शायद आपको वहां अंतर मिलेगा। – Merec

+0

यह किस ब्राउज़र में हो रहा है? मैं एक अलग मार्जिन को छोड़कर क्रोम में मुद्दों पर नहीं देख रहा हूं। –

+0

क्रोम और एफएफ दोनों ऊंचाई में अंतर दिखा रहे हैं, हालांकि एफएफ बहुत बड़ा अंतर है – Horse

उत्तर

0

पैडिंग बटन और एंकर पर अलग-अलग लागू होता है। मैं इसे वास्तव में नहीं जानता, लेकिन मेरा अनुमान है कि बटन एक बटन की तरह दिखने के लिए इसके मूल्य के चारों ओर थोड़ा और अधिक स्थान सुरक्षित करता है जहां एक लिंक टेक्स्ट के रूप में प्रस्तुत किया जाता है।

आप इस कोशिश कर सकते हैं:

a { 
    padding-top:5px !important; 
    padding-bottom:5px !important; 
    padding-left:0px !important; 
    padding-right:0px !important; 
} 

कौन वास्तव में एक ही आकार है, लेकिन बहुत करीब नहीं होगा।

+1

जैसा मूल रूप से पोस्ट में कहा गया है, मैं इसके पैडिंग को नहीं सोचता। मेरे अपडेट में दिखाए गए बॉक्स मॉडल इस (बैंगनी) को दिखाते हैं, जहां नीले हिस्से को इनपुट – Horse

+1

पर होने की आवश्यकता से बड़ा लगता है, मुझे अभी भी लगता है कि यह एक बटन की तरह दिखने के लिए स्टाइल टेक्स्ट की कोशिश करने के लिए उबलता है, जिसमें निश्चित है इसके साथ जुड़े ओवरहेड। एक बटन की तरह एंकर को स्टाइल किए बिना एक एंकर के अंदर एक बटन स्टाइल बटन डालने के लिए त्वरित और आसान होगा ... http://jsfiddle.net/aeD4Z/3/ हालांकि यह हो सकता है कि आप जो खोज रहे हैं वह हो। –

+0

कहने के लिए चिंतन में मुझे एक ही समस्या है। पैडिंग दोनों पर समान है (सत्यापित, इसे देख सकते हैं), लेकिन इनपुट पर एंकर पर ऊंचाई शायद दोगुनी हो सकती है। बहुत अजीब! –

1

पूरी तरह से बराबर करने के लिए "बटन-ish" <a> लंगर, input और अधिक हाल ही button, यह एक अच्छा विचार है, उनके बॉक्स sizings सिंक्रनाइज़ करने के लिए:

input और button ऐतिहासिक कारणों से quirks मोड में अब भी कर रहे हैं (आधुनिक मोड में पहले से ही box-sizing: border-box) शेष बाकी box-sizing: content-box मोड में है ...(किसी भी तरह से: एक ही मोड में डालें या गद्दी differenciating द्वारा बराबर हाइट्स के लिए क्षतिपूर्ति करना होगा)

enter image description here

यह, मेरी मानक "परीक्षण" है जब मैं एक साइट के लिए स्टाइल शुरू:

__AA__ 
<button id='button'>plain Button</button> 
<a class='button' href='#'>plain Anchor</a> 
<a class='button'>linkless Anchor</a> 
<input class='button' type='submit' value='Input Button' /> 
__BB__ 

button, a.button, input.button 
    display inline-block 
    font-size 12px 
    font-weight bold 

    color white 
    font-family sans-serif 
    text-decoration none 
    background #24B345 
    cursor pointer // also linkless (i.e. js) anchors/buttons should have that 

    // important to equalize input/button vs. anchor: 
    box-sizing content-box 
    border 4px solid green 
    padding 8px 10px 
    margin 5px 4px 10px 0 

    // some of this is default, 
    // but since input often gets styled elsewhere... 
    vertical-align middle // a bit subject to taste 
    min-height 0 

    &:hover, &:focus // slight hover effect, resp. keyboard use (:focus) 
     background: #44D365 
:

इस सीएसएस (stylus अंकन में) एक अच्छा बॉयलरप्लेट है

Live on Codefork

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