Question

在我的网站上我有一个位于网页中心的文本框，但问题是我需要它从网页顶部25px。我尝试了d top：25px; 但它仍然无法工作..我打算将我的代码上传到 Jsfiddle ，但文本框无法正常工作只需发布一个链接到我的下拉框并包含下面的CSS

的升降梭箱

https://www.dropbox.com/s/5lw3r9impok4eo8/MyWebsite.zip

的CSS

/** Advanced Css Search Box */

#advsearch {
margin: auto;              **Puts Textbox In The Center**
}
#advsearch input[type="text"] {
background: url(images/search-dark.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
 padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#advsearch input[type="text"]:focus {
width: 200px;
}

HTML

<div id="advanced search">
   <form method="get" action="/search" id="advsearch">
    <input name="q" type="text" size="40" placeholder="Search..." />
  </form>
</div>

Answer 1

<div id="advanced_search">
   <form method="get" action="/search" id="advsearch">
    <input name="q" type="text" size="40" placeholder="Search..." />
  </form>
</div>

#advanced_search {margin-top: 25px;}

OR

#advsearch {margin: 25px auto;}

Answer 2

一些事情：

您指定的id ...

<div id="advanced search">

和你正在使用的CSS选择器......

#advsearch

不匹配。

您可以通过在HTML元素中指定以下内容来修复：

<div id="advsearch">

然后，这是指定输入的margin-top值的问题......

#advsearch input[type="text"] {
   margin-top: 25px;
   width: 200px;
}

Answer 3

你的css文件有两种方法可以做到：

method a:

position: absolute;
top: 25px;

method b:

display: inline;
float: top;

根据元素周围的其他样式，尝试两者，看看哪种最适合你。

Css从顶部对齐文本框

3 个答案: