2

CSS を使用してテキスト ボックスの直下に Div を配置すると、いくつか問題が発生します。できれば CSS/CSS3 トランジションのみを使用して、テキスト ボックスのすぐ下に Div が必要です。私が知っていることを試してみましたが、すべての試みが失敗したようです。誰かが私を助けることができれば、私は素晴らしいです。

写真 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: 0andpadding: 0を定義することもできます。htmlbody

これがあなたが求めているライブデモです。

お役に立てれば。

于 2012-08-22T11:02:57.650 に答える
0

padding:4px; を指定したことが原因である可能性があります。入力します。0px に置き換えます。

于 2012-08-22T11:21:55.213 に答える
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 に答える