Question

我绝对新手决定学习html，css，现在创建我的第一个社交网络项目并且前端有问题，它只能用html工作，但在某些时候我在style.css中写了更多代码选择一个性别变得不可见，不知道为什么，如果你能帮助我，那就是我的代码：

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  background-color: #f2f2f2;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.container {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2
}
#head_wrap {
  width: 100%;
  height: 150px;
  border-bottom: 5px solid brown;
  padding: 10px;
  background: #99ccff
}
#header {
  margin: auto;
  width: 1000px;
  height: 1000px;
}
#form1 {
  float: right;
  line-height: 100px;
}
#form1 input {
  width: 150px;
  height: 20px;
  padding: 10px;
}
#form1 button {
  width: 100px;
  padding: 10px;
}
#form1 button:hover {
  background-color: blue;
  color: white;
}
# content {
  width: 1000px;
  height: 600px;
  margin: 0 auto;
}
#form2 {
  float: right;
  margin-top: 20px;
}
#form2 input {
  width: 250px;
  height: 20px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
#form2 select {
  width: 270px;
  height: 20px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
#form2 button {
  width: 270px;
  padding: 10px;
  margin-left: 70px;
}
#form2 button:hover {
  background-color: blue;
  color: white;
}
#form2 h2 {
  padding: 5px;
  margin-left: 100px;
  font-family: comic sans ms;
}

<!DOCTYPE html>

<html>

<head>
  <title>My Social Network</title>
</head>


<body>
  <!--container starts-->
  <div class="container">
    <!--Head wrap starts-->
    <div id="head_wrap">
      <!-- Header starts -->
      <div id="header">

        <img src="images/logo.png" style="float: left;" />
        <form method="post" action="" id="form1">
          <strong>Email:</strong>
          <input type="text" name="email" placeholder="Email" />
          <strong>Password:</strong>
          <input type="password" name="pass" placeholder="*******" />
          <button name="login">Login</button>
        </form>

      </div>
      <!--Header ends-->
    </div>
    <!--Head wrap ends -->
    <!--Content area starts-->
    <div id=content ">
    <div>
    <img src="images/image.png " style="float:left; margin-right:-40px; "/>
    </div>
    <div id="form2 ">
    <form action=" " method="post ">
    <h2> Sign Up Here</h2>
    <table>
    <tr>
    <td align="right ">Name:</td>
    <td><input type="text " name="u_name " placeholder="Enter your name "/>
    </td>
    </tr>
    <tr>
    <td align="right ">Password:</td>
    <td><input type="text " name="u_pass " placeholder="Enter your password "/>
    </td>
    </tr>
    <tr>
    <td align="right ">Email:</td>
    <td><input type="text " name="u_email " placeholder="Enter your email "/>
    </td>
    </tr>
    <tr>
    <td align="right ">Country:</td>
    <td>
    <select name="u_country ">
    <option>Select a Country</option>
    <option>Afghanistan</option>
    <option>India</option>
    <option>Pakistan</option>
    <option>United States</option>
    <option>United Aran Emirates</option>
    </select>
    </td>
    </tr>
    <tr>
    <td align="right ">Gender:</td>
    <td>
    <select name="u_country ">
    <option>Select a Gender</option>
    <option>Male</option>
    <option>Female</option>
    </select>
    </td>
    </tr>
    <tr>
    <td align="right ">Birthday:</td>
    <td>
    <input type="date " name="birthday ">
    </td>
    </tr>
    <tr>
    <td colspan="6 ">
    <button name="sign_up ">Sign Up</button>
    </form>
    
    <!--Content area ends-->
    
    
    </td>
    </tr>
    
    </table>
    </form>
    </div>
    </div>
    <!--container ends-->
    
    
    
    
    </body>
    </html>

请不要判断我是否犯了一些错误，或者打破了一些stackoverflow规则，这是我的第一篇文章。

Answer 1

这很简单我通过将style.css height中的form2 select大小从20px更改为40px来解决了问题：

#form2 select {
    width:270px;
    height:40px;
    padding:10px;
    border:1px solid black;
    border-radius:5px;

P.S。另外，感谢Barmar找到<div id="content">错字。

选择一个不再可见的国家/地区

1 个答案: