Question

所以每当我创造一些东西时，另一个项目就会移动。这次我想在左中角放置文字，但是当我这样做时按钮会在同一级别上。

CSS

    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Francois+One);
@font-face {
    font-family: Myraid;
    src: url(MYRIADPRO-SEMIBOLD.woff);
}

*{margin:0;padding:0;}

body {
  background: url('file:///C:/xampp/htdocs/css_page/css/HQ_IMAGE.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 25px;
  font-family:'Open Sans',sans-serif;

  }

.login_button{

background: #dfdfdf;
border: 0;
padding: 10px 30px 10px 30px;
border-radius: 3px;
font-size: 15px;
font-family:'Open Sans',sans-serif;
margin-top: 18px;
margin-left: 1100px;
-webkit-transition:background .3s;

}

.login_button:hover{

background: #fff;

}

.Head_text{

margin: 150px 15px 150px 15px;
}


.login{
position: relative;
float: right;
margin-left: 1080px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: none;
border-radius: 2px;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
font-size: 17px;
cursor: pointer;
-webkit-transition:background .3s;
font-family: Arial;
font-weight: bold;
color: #fff;
position: fixed;
}    

.login:hover{
opacity: 0.5;
background: #000000;
border: 1px solid #000000;
border-radius: 2px;


}

.signup{

float: right;
border: 0;
background: #F77462;
margin-left: 1200px;
border-radius: 2px;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
font-size: 17px;
cursor: pointer;
-webkit-transition:background .3s;
font-family: Arial;
font-weight: bold;
color: #fff;
position: fixed;
}

.signup:hover{
background: #f6614d;
border-radius: 2px;


}



input[type="text"],input[type="password"]{
  width:300px;
  background: transparent;
  border:1px solid #ccc;
  padding:1%;
  font-size: 17px;
  font-family:'Open Sans',sans-serif;
  color:#fff;
  border-radius: 3px;
  margin-left: 1000px;

}
input[type="text"]:focus,input[type="password"]:focus{

background: rgba(149, 147, 150, 0.2);


}

HTML

<!DOCTYPE html>
<html>

    <head>

            <title>Home</title> 

            <link href="C:\xampp\htdocs\css_page\css\styles.css" rel="stylesheet">

    </head>


    <header>

    <div id="login">

          <form>

            <a href="#"><input type="button" class="login" value="Login"></a>


            <a href="#"><input type="button" class="signup" value="Signup"></a>

         </form>

    </div>


    </header>   

    <body>      



    <p class="Head_text">Where You</p>

    </body>



</html>

我也试过但是，结果相同。如果你能告诉我错误，我会非常感激。

Answer 1

尝试将这些元素放入宽度为100％的容器中并浮动它们，而不是尝试将所有元素放在大边距上。

您的

.login

输入风格既有固定位置也有相对位置以及

margin-left: 1200px and 1000px

。

我猜

.login

应该是

#login

，因为

.login

是您已使用

[type=text]

设置样式的输入。

< / p>

我制作了 code

的代码

按钮随文字移动？

1 个答案: