使用CSS指定表单提交按钮的宽度与锚点的宽度相同的问题

Question

使用CSS指定表单提交按钮的宽度与锚点的宽度相同的问题

我有一个基本的菜单,由一些div和锚建立.然而,在某些情况下,我需要使用表单<input type="submit">(它是移动设备的模板,因此我不能在这里使用javascript ,而不是锚点,我必须使用提交表单数据的提交按钮).

我一直在努力工作几个小时的问题是让输入与锚点具有完全相同的宽度.它们都设置为宽度:50%; 但输入略短于锚点.只是极少,但仍然很明显.我不知道为什么会这样.有人能帮忙解决这个问题吗？我的简化代码如下,问题可以在桌面chrome和firefox以及我测试过的各种手机上重现.

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

首先,您应该在所有看起来相同的元素之间共享相同的CSS类.这意味着更少的CSS,更少的维护.

要解决您的问题,您需要将类名放在INPUT周围的DIV上,然后将一些自定义样式应用于输入以使其填充DIV.您可以使用DIV上的背景+填充来模拟边框.

见这里:http://jsfiddle.net/jMTT3/2/

归档时间：	14 年，11 月前
查看次数：	6304 次
最近记录：	14 年，11 月前