-2

好吧，我在过去的一个小时里一直在寻找一个名字的表格，而且我一直在努力直到这一点，所以决定在这里问。是的，我已经搜索过这个地方......

我的HTML：

<div id="main" class="main">
    <table border="0" class="container1">
        <tr>
            <td>
                <p>
                    <img src="images/doesitfit.png" />
                </p>
            </td>
        </tr>
    </table>
    <table border="0">
        <div class="container2">
            <input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"></input>
        </div>
    </table>
</div>

我的CSS：

.main {
    background-color: rgba(11, 11, 11, 0.8);
    width: 800px;
    height: 550px;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    min-height: 10em;
    height:100%;
    overflow:hidden;
}
.container1 {
    table-layout: fixed;
    height:50%;
    overflow:hidden;
    width: 802px;
    border-color:#ff0000;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    min-height: 10em;
    color:white;
    margin: auto;
}
.container2 {
}
#form {
    font-size: 19px;
    border: 0px solid;
    color: #7a7a7a;
    height:28px;
    width:295px;
    text-align:center;
    margin: auto;
}

此外，我计划添加更多表单（输入），例如电子邮件和电话号码。

非常感谢 SOF，希望最后能得到一些帮助。

4

3 回答 3

2

我创建了一个 CodePen 来展示如何使输入居中。( http://codepen.io/kevingimbel/pen/BKruj )

这里的主要问题是margin: 0 auto;在 Input 设置为之前不会工作display:block;- 我认为你不应该<table>用于布局 - 使用<div>.

无论如何，我还评论了 Pen 中的 CSS。如果您需要更多帮助发布它，我会看这个帖子一段时间。希望我能帮上忙。

于 2013-09-22T09:43:24.047 回答
0

尝试这个：

form {
margin-left:auto;
margin-right:auto;
}
于 2013-09-22T09:29:46.137 回答
-1

将您的输入包装在表单元素中，并在 CSS 中的表单之前丢失 # 符号

<form>
  <input type="text" value="Enter Your First Name" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';">></input>
</form>


form {
  font-size: 19px;
  border: 0 solid;
  color: #7a7a7a;
  height: 28px;
  width: 295px;
  text-align: center;
  margin: 0 auto;
}

或者如果您想保留输入 ID 表单

<input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';">></input>


#form {
  display: block;
  font-size: 19px;
  border: 0 solid;
  color: #7a7a7a;
  height: 28px;
  width: 295px;
  text-align: center;
  margin: 0 auto;
}
于 2013-09-22T09:35:48.650 回答