了一些要素CSS不工作

-3

Sample Image

我試着做以下和無法獲得成功。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sign Up</title> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <div class="header"> 
     <!--menu--> 
    </div> 

    <div class="container"> 
     <form> 
      <div class="group"> 
       <input type = "text" placeholder = "Your Name" id = "name"/> 
      </div> 
      <div class="group"> 
       <input type = "email" placeholder = "Enter Your Email" id = "email"/> 
      </div> 
      <div class="group"> 
        <input type = "password" placeholder = "Password" id = "password"/> 
        <input type = "password" placeholder = "Confirm Password" id = "password"/> 
      </div> 

       <div class="submit"><input id = "submit" type="submit" name= "formSubmit" value="CREATE A FREE ACCOUNT" class="btn"/></div> 
     </form> 
    </div> 
</body> 
</html>

CSS：

body{ 
    background-image: url(images/bg.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
    font-family: 'Roboto', sans-serif; 
} 
.container{ 
    width: auto; 
    background-color: #FFFFFF; 
    height: 300px; 
    padding: 30px; 
    border-radius: 30px; 
} 
.forms{ 
    background-color: #FCFCFC; 
} 
input{ 
    font-family: 'Roboto', sans-serif; 
    border-radius: 2px; 
} 
input#name{ 
    background-image: url(images/name.jpg); 
    background-size: 10%; 
    background-repeat: no-repeat; 
    background-position: center left; 
    border:none; 
    padding-left: 50px; 
    margin-top: 10px; 
    width: 400px; 
    height: 40px; 
} 
input#email{ 
    margin-top: 10px; 
    background-image: url(images/mail.jpg); 
    background-size: 7%; 
    background-repeat: no-repeat; 
    background-position: center left 6px; 
    border:none; 
    padding-left: 50px; 
    width: 400px; 
    height: 40px; 
    font-size: :16px; 
} 
input#password{ 
    margin-top: 20px; 
    background-image: url(images/pass.png); 
    background-size: 7%; 
    background-repeat: no-repeat; 
    background-position: center left 6px; 
    border:none; 
    padding-left: 50px; 
    width: 170px; 
    height: 40px; 
    margin-right: 4px; 
} 

input#submit{ 
    margin-top: 10px; 
    background-color: #A5ABB0; 
    border: none; 
    height: 50px; 
    width: 447px; 
    cursor: pointer; 
    font-weight: 400; 
    font-size: 17px; 
    color: white; 

} 

.group{ 
    margin: 18px auto; 
    border-bottom: 2px solid #BEBEBE; 
    overflow: hidden; 
}

我試過幾件事情，但他們只是不發生，無法按預期一切都來了。

幫我個忙，請

來源

2016-01-08 Md. Mohsin Hussain

嗨，「不工作」是不是一個好的錯誤描述。請嘗試描述究竟出了什麼問題，並考慮在http://jsfiddle.net上構建一個測試用例 –

容器的字體大小，自動調整等操作不起作用 –

請至少構建一個測試用例。 –

你已經差不多了。你只需要給width和margin爲<form>：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sign Up</title> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <div class="header"> 
     <!--menu--> 
    </div> 

    <div class="container"> 
     <form> 
     <div class="group"> 
      <input type = "text" placeholder = "Your Name" id = "name"/> 
     </div> 
     <div class="group"> 
      <input type = "email" placeholder = "Enter Your Email" id = "email"/> 
     </div> 
     <div class="group"> 
      <input type = "password" placeholder = "Password" id = "password"/> 
      <input type = "password" placeholder = "Confirm Password" id = "password"/> 
     </div> 

     <div class="submit"><input id = "submit" type="submit" name= "formSubmit" value="CREATE A FREE ACCOUNT" class="btn"/></div> 
     </form> 
    </div> 
    </body> 
</html>

和CSS

body{ 
    background-image: url(images/bg.png); 
    background-size: cover; 
    background-repeat: no-repeat; 
    font-family: 'Roboto', sans-serif; 
    background-color: #00f; 
} 
.container{ 
    width: 50%; 
    margin: 125px auto 0; 
    background-color: #FFFFFF; 
    height: 300px; 
    padding: 30px; 
    border-radius: 30px; 
} 
.forms{ 
    background-color: #FCFCFC; 
} 
input{ 
    font-family: 'Roboto', sans-serif; 
    border-radius: 2px; 
} 
input#name{ 
    background-image: url(images/name.jpg); 
    background-size: 10%; 
    background-repeat: no-repeat; 
    background-position: center left; 
    border:none; 
    padding-left: 50px; 
    margin-top: 10px; 
    width: 400px; 
    height: 40px; 
} 
input#email{ 
    margin-top: 10px; 
    background-image: url(images/mail.jpg); 
    background-size: 7%; 
    background-repeat: no-repeat; 
    background-position: center left 6px; 
    border:none; 
    padding-left: 50px; 
    width: 400px; 
    height: 40px; 
    font-size: :16px; 
} 
input#password{ 
    margin-top: 20px; 
    background-image: url(images/pass.png); 
    background-size: 7%; 
    background-repeat: no-repeat; 
    background-position: center left 6px; 
    border:none; 
    padding-left: 50px; 
    width: 170px; 
    height: 40px; 
    margin-right: 4px; 
} 

input#submit{ 
    margin-top: 10px; 
    background-color: #A5ABB0; 
    border: none; 
    height: 50px; 
    width: 447px; 
    cursor: pointer; 
    font-weight: 400; 
    font-size: 17px; 
    color: white; 

} 

.group{ 
    margin: 18px auto; 
    border-bottom: 2px solid #BEBEBE; 
    overflow: hidden; 
}

輸出：http://jsbin.com/zorelitema

來源

2016-01-08 12:36:15

沒有任何其他方式，我們不必將其硬編碼爲50 ％，不能自動更改寬度？ –

@ Md.MohsinHussain你想擁有多寬。你需要確定一個寬度。 –

爲什麼如此？我們不能讓它的寬度和它裏面的內容自動相等 –

如果您嘗試應用在輸入區的CSS，然後寫選擇爲...

input[type="text"]

或

input [type="password"]

或

input [type="submit"]

- 如果你面對anot她的問題在CSS上，請正確描述.... thx。

來源

2016-01-08 12:28:10 RyhanRakib

我該怎麼做才能使頁面像我在這篇文章中添加的頁面 –

也如何使容器的大小等於其內容 –

了一些要素CSS不工作

回答

相關問題