0

在我的网站上，我有一个位于网页中心的文本框，但问题是我需要它距离网页顶部 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>
4

3 回答 3

3 
<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;}

或者

#advsearch {margin: 25px auto;}

于 2013-06-07T01:23:33.683 回答
2

几件事：

id你指定的...

<div id="advanced search">

以及您正在使用的 CSS 选择器...

#advsearch

不匹配。

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

<div id="advsearch">

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

#advsearch input[type="text"] {
   margin-top: 25px;
   width: 200px;
}
于 2013-06-07T01:26:33.403 回答
1

您有 2 种方法可以通过您的 css 文件执行此操作：

method a:

position: absolute;
top: 25px;

method b:

display: inline;
float: top;

根据元素周围的其他样式，尝试两者以查看最适合您的样式。

于 2013-06-07T01:27:52.157 回答