2

我在使用 CSS 将 Div 直接放在文本框下时遇到了一些问题。我需要直接在文本框下的 Div，最好只使用 CSS/CSS3 过渡。我已经尝试了我所知道的，但所有尝试似乎都失败了。如果有人可以帮助我，我会很高兴。

图 1 是我尝试放置 Div 的方式，图 2 是现在的方式：http: //i49.tinypic.com/2h31zjp.jpg

CSS：

input {
  top:18px; left:20px;
  width:1230px; padding:4px;
  border:1px dashed grey;
  font:16px arial;
  font-weight:bold;
  color:#d8d8d8;
}

input:focus+p {
  height:200px;
}

p {
  overflow:hidden;
  height:0;
  width:1230px;
  background-color: transparent;
  border:1px dashed gray;
  transition:height.5s;
  -moz-transition:height 0.5s;
  -o-transition:height 0.5s;
  -webkit-transition:height 0.5s;
}
4

4 回答 4

3

您必须放置第<input>一个，然后是<div>. 可以使用换行符将 div 下推<br>。由于输入本身有一个默认边框，由浏览器完成，因此有可能在多个浏览器中改变外观。所以你必须为你的 定义一个实心边框<input>，比如一个 1px 的边框。您还可以在您的或您的父容器中定义margin: 0和。padding: 0htmlbody

这是您所要求的现场演示。

希望这可以帮助。

于 2012-08-22T11:02:57.650 回答
0

检查 div 元素的边距和填充以及文本元素的边距。它应该全部为0以实现您想要的一切。

于 2012-08-22T10:53:34.600 回答
0

试试这个

input{

     font-family:Verdana, Geneva, sans-serif; color:#900    ;
     background-color:#CCC; width:100%
}
p{
    padding:0;
     margin:0;
    width:100%;
    height:150px;
    border:#063 dotted 2px;
    background-color:#9C3   
}


<input name="" type="text" />
<p>Lorem ipsum</p>
于 2012-08-22T11:01:18.817 回答
0

可能是因为你给定了 padding:4px; 输入。将其替换为 0px；

于 2012-08-22T11:21:55.213 回答