Question

好的......这很奇怪。

以下是我所有输入的代码：

#sign_in input#submit {
    height: 56px;
    background-color: #88b805;
    font-weight: bold;
    text-decoration: none;  
    padding: 5px 40px 5px 40px; /* top, right, bottom, left */  
    border: 0;
    width: auto;
    -moz-border-radius: 25px;
    -khtml-border-radius: 25px;
    -webkit-border-radius: 25px;    
}

#sign_in input#submit:hover {
    -moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
    -khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
    cursor: pointer;    
}

input, textarea {
    font-size:20px; 
    display: block; 
    width: 365px; 
    height: 40px; 
    background: #273243; 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; 
    color: #ffffff;
    /* margin: 0 0 0 100px;     top, right, bottom, left */ 
    padding: 5px 5px 5px 15px; /* top, right, bottom, left */
    border: 0px;
}

input:focus, textarea:focus {
    background: #313131;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; 
}

我的问题在于提交按钮：

<div id="sign_in" align="center">

<form>
        <input id="name" type="text" value="Email address" required class="clearField curved" /> <br />
        <input id="password" type="text" value="Password" required class="clearField curved" /><br />   
        <input id="submit" type="submit" value="Log in" class="curved" align="center">
    </form>

</div>

即使我将div设置为align = center，除登录按钮外，所有内容都在Chrome中居中。

顺便说一下，当我在Firefox中检查它，而在Mac上检查Safari时，它看起来还不错。在Windows和Mac中只是Chrome，提交按钮看起来像是在左边缘齐平。

另外，当我在Chrome中检查开发者工具中的属性时，我发现一些奇怪的事情：

input::-webkit-outer-spin-button {
-webkit-appearance: outer-spin-button;
-webkit-user-select: none;
display: inline-block;
margin-left: 2px;
}

我不确定为什么margin-left设置为2px。我想我可以针对那个特定的伪类来覆盖它，还没有尝试过，但是想知道是否还有另一种方法可以做到这一点而不必这样做？这看起来有点'黑客'。

为什么要这样做，我该如何解决？我希望按钮居中对齐。

编辑：我针对那个特定的Pseudo选择器，并试图设置边距并没有发生任何事情。它没有改变按钮的布局，甚至将margin-left设置为150px。所以不确定发生了什么。

Answer 1

从div元素中删除align =“center”。

        #sign_in {
        width:960px;
        margin:0 auto;
    }
    #sign_in input#submit {
        height: 56px;
        background-color: #88b805;
        font-weight: bold;
        text-decoration: none;  
        padding: 5px 40px 5px 40px; /* top, right, bottom, left */  
        border: 0;
        -moz-border-radius: 25px;
        -khtml-border-radius: 25px;
        -webkit-border-radius: 25px;    
    }

    #sign_in input#submit:hover {
        -moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
        -khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
        -webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5); 
        cursor: pointer;    
    }

    input, textarea {
        font-size:20px; 
        display: block; 
        width: 365px; 
        height: 40px; 
        background: #273243; 
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px; 
        color: #ffffff;
        /* margin: 0 0 0 100px;     top, right, bottom, left */ 
        padding: 5px 5px 5px 15px; /* top, right, bottom, left */
        border: 0px;
    margin:0 auto;
    }

input :: - webkit-outer-spin-button设置margin-left并仅显示在Chrome中

1 个答案: