Question

我的问题我只是想要帮助如何在我按住按钮时修改页脚和“不同语言的Google”。我正在尝试自己构建它（不参考chrome dev工具中的google主页代码），所以我不知道他们做了什么以便修复这两个元素的位置。

这是我的代码：

<!DOCtype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
    <title>Google</title>
</head>
<body>
    <div>
    <header class="start">
        <ul>
            <li><a href="#">Gmail</a></li>
            <li><a href="#">Images</a></li>
            <li class="button"><a href="#">Sign in</a></li>
        </ul>
    </header>

    <h1>
        <img src="../Images/googlelogo.png" alt="Google logo"/> 
        <span>India</span>
    </h1>   

    <form>
        <input type="text"/><br>
        <input type="submit" value="Google Search" id="text" name="search"/>
        <input type="submit" value="I'm Feeling Lucky" name="search2"/>
    </form>
    <p>
        Google.co.in offered in: <a href="#">Hindi</a><a href="#">Bangla</a><a href="#">Malayalam</a><a href="#">Marathi</a>
    </p>
    <footer>
            <nav class="left">
            <ul>
                <li><a href="#">Advertising</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">About</a></li>
            </ul>
            </nav>
            <nav class="right">
            <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">UseGoogle.com</a></li>
            </ul>
            </nav>
    </footer>
    </div>
</body>
</html>

我的CSS样式表：

*
{
    padding:0px;
    margin: 0px;
}

body
{
    font-family:Arial,sans-serif;
}
div:first-child
{
     font-size:25px;
     margin:auto;
     text-align:center;
     padding-top:0px;
}
div header ul
{
    margin-right:0px;
    text-align:right;
    font-size: 17px;

}
body div header.start
{
    padding-top:0px;
}
h1 
{
    display:inline-block;
    font-size:20px;
}

h1 span
{
    position:relative;
    right: 63px;
    bottom: 5px;
    color:rgb(51,187,232);
    font-size:small;
    font-family: "Arial", sans-serif;
}
li.button a
{
    display:inline-block;
    outline:none;
    background-color:rgb(10,125,247);
    padding:9px;
    border:solid 1px;
    border-radius: 4px;
    font-weight: bold;
    color:#F5F5F5;

}
li.button a:hover
{
    text-decoration:none;
    outline:grey 3px;
    box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
    background-color:rgb(11,95,191);
    border:inset 1px #C7C7C7;
}
a
{
    text-decoration: none;
    word-spacing:5px;
    font-size: 15px;
    color:grey;

}
a:hover
{
    text-decoration:underline;
}
a::after
{
    content: " ";
    text-decoration: none;
}
input[type="text"]
{
    margin:auto;
    max-width:500px;
    width:40%;
    padding:10px;
}
input[type="text"]:visited
{
    outline:blue;
}
input[type="submit"]
{
    color:#727578;
    border:solid 0px;
    background-color:#E3E6E8;
    font-weight:bold;
    padding:10px;
    margin: 30px 5px;
    margin-bottom:0px;
}
input[type="submit"]:hover
{
    border:ridge 2px;
    color:black;
    background-color:#f0f0f0;
}
input[type="submit"]:active
{
    outline:blue;
}
p
{
    margin:0px;
    padding:0px;
    font-size:14px;
    position:relative;
    top:15px;
}

p a::after 
{
    content: " ";
    text-decoration: none;
}
p a:link
{
    color: blue;
}
ul li
{
    list-style-type: none;
    display:inline;
    word-spacing: 10px;
}

nav.left ul li 
{
    padding-top:2px;
    position:relative;
    right:590px;
    top:50px;
}
nav.right ul li
{
    position:relative;
    left:500px;
    top:0px;
}
footer nav.right ul
{
    display:block;
    background-color:#e3e3e3;
    padding-top:20px;
    margin-bottom:0px;
}

让我告诉你，我对CSS3元素很新。但我对大多数CSS非常熟悉。我再说一遍，我不需要对此进行完整的调试（除非有必要）。请帮我解决这个问题（本主题开头的粗体文字）。

Answer 1

您的问题是input[type="submit"]:hover将border-width从0px更改为2px，因此按钮的总高度和宽度会增加并移动到4px的内容之下。

您的解决方案是改变

input[type="submit"] {
  ...
  border: solid 0px;
  ...
}

到

input[type="submit"] {
  ...
  border: transparent solid 2px;
  ...
}

悬停按钮时Google主页底部元素不固定

1 个答案: