Problem using CSS to specify width of form submit button to be same as width of anchor_问答_开发者

Problem using CSS to specify width of form submit button to be same as width of anchor

开发者 https://www.devze.com 2023-03-09 23:45 出处：网络

I have a basic menu that is built up of some div\'s and anchors. In some instances however, instead of an anchor I need to use a form <input type=\"submit\"> (it\'s a template for mobiles so I can\

I have a basic menu that is built up of some div's and anchors. In some instances however, instead of an anchor I need to use a form <input type="submit"> (it's a template for mobiles so I can't use javascript here, I have to use a submit button that will submit the form data).

My problem I have been struggling with for hours now is to get the input to have the e开发者_如何学JAVAxact same width as the anchors. They are both set to width:50%; however the input is slightly shorter than the anchors. Only minimally, but it is still apparent. I have no idea why this is happening. Is anyone able to help with this? My simplified code is below, and the issue is reproducible in desktop chrome and firefox, as well as the various mobiles I've tested on.

<html>
<head>
    <style>
        a.btn_bigfake{
            display:block;
            width:50%;
            margin: 0px auto 5px auto;

            background:#f5f5f5;
            border:4px solid #282726;
            text-align: center;
        }

        input.btn_bigfake{
            width:50%;
            display:block;
            margin: 0px auto 5px auto;

            background:#f5f5f5;
            border:4px solid #282726;
            text-align: center;
            padding:0;
        }
        div{width:100%;}
    </style>
</head>
<body style="width:100%; margin:0; padding:0;">
    <div><a href="#" class="btn_bigfake">1. anchor</a></div>
    <div><a href="#" class="btn_bigfake">2. anchor</a></div>
    <div><input type="submit" class="btn_bigfake" value="3. input"/></div>
</body>
</html>

Firstly, you should be sharing the same CSS class between all elements that are intended to look the same. It means less CSS, and less maintenance.

To solve your issue, you need to put the classname on the DIV surrounding the INPUT, and then apply some custom styling to the input to make it fill the DIV. You can emulate the border using a background + padding on the DIV.

See here: http://jsfiddle.net/jMTT3/2/

It has to do with how width;50%; is calculated when a border also exists. I've always had to add a few pixels of width to the <input> to get it to match the others. Or you could set your containing divs to width:50;, and both the anchor and input to width: 100%'.