Question

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

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

Answer 1

您必须先放置<input>，然后放置<div>。可以使用换行符<br>来下推div。由于输入本身具有默认边框，由浏览器完成，因此有可能在多个浏览器中进行外观更改。因此，您必须为<input>定义一个实线边框，例如1px的边框。您还可以在margin: 0或padding: 0或您的父容器中定义html和body。

Here 是您要求的实时演示。

希望这有帮助。

Answer 2

检查div元素的边距和填充以及文本元素的边距。它应该都是0来实现你想要的一切。

Answer 3

试试这个

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>

Answer 4

可能是因为你给了填充：4px;输入。将其替换为0px;

将Div直接放在文本框下面

4 个答案: