<form action="..."> <input type="text" ... <input type="submit" ...> </form> <div id="forgotyourpassword"> Forgot your password? "> <form action="..."> <input type="text" ... <input type="submit" ...> </form> <div id="forgotyourpassword"> Forgot your password? "> <form action="..."> <input type="text" ... <input type="submit" ...> </form> <div id="forgotyourpassword"> Forgot your password? " />

divの要素を固定幅と高さに相対的に整列させる

マークアップは次のようになります。

<div id="content">
   
   <form action="...">
     <input type="text" ... >
     <input type="submit" ...>
   </form>

   <div id="forgotyourpassword">
     Forgot your password?
   </div>
</div>

フォームのマークアップはCMSによって生成されるため、変更することはできません。

content divの幅と高さは固定されているため、ページ内で縦と横の中央に置くことができます。現在、 content 内のすべての子は display：inline-block に設定され、

I have aligned the forgot your password link like this: intial

そして、ここに問題のリンクのためのCSSがあります：

#forgot-password{

    float: right;
    margin: 0; /* reset some stuff inherited from parent */
    padding: 0; /* reset some stuff inherited from parent */
    margin-right: 171px;
    margin-top: -20px;
}

ここにいくつかの関連するCSSがあります：

#content{
    position:absolute;
    width: 650px; 
    left:50%;
    top:50%;
    height:242px;
    margin-top:-126px;
    margin-left: -325px;
    text-align: center;
}

#content > *{
  vertical-align: middle;
  display: inline-block;
  zoom:1; 
  *display:inline;
  margin-left: 20px;
  margin-right: 20px;
}

That all works well. However, in some cases, for example, if an error has occurred with the form submission, then an error message will be appended to the from in the <form> element by the backend.

In such a case, I want the link to be aligned like so: two

私のCSSの問題点は、パスワードを忘れた場合のリンクが親の content の一番下から揃っていることです。ボタンとの相対的な位置合わせが必要です。

私の最初のアイデアは、パスワードを忘れたパスワードのdivをフォームの下に並べることでした。したがって、エラーメッセージが追加されたときにフォームのサイズが変更されると、パスワードを忘れたリンクが下にプッシュされます。

次に、 margin-top を負のピクセル数に設定して、私のパスワードを忘れたパスワード divをバックアップしてxピクセルにし、要素を送信ボタンnoフォームがどのくらい背の高いものになっているか

私はこれが当てはまらないことを発見しています：

  • firefox 10では、パスワードを忘れた divは、フォームのコンテンツ領域と重なると、定義したピクセル分だけ「プッシュアップ」されていないようです。
  • IE9では、パスワードを忘れたパスワードがフォームの上に表示されます！

ちょうどCSSを使ってこれをやり取りし、IE7以上とFirefoxで動作させる方法はありますか？

0
追加された 編集された
ビュー: 4
源
ru fr es pt de ar
あなたがあらかじめ指定された幅でdivに整列させたい内容を囲みます。それは次に整列されます。私はur問題が発生していると思います。異なるブラウザ..
追加された 著者 Vivek Chandra, 源

2 答え

フォームのマークアップを変更できないため、フォームの子として forgotyourpassword にdivを挿入できません。

そこで、私はラッパーdivを追加しました：

<div id="content"> 
    
   <div id="wrapper>
       <form action="..."> 
         <input type="text" ... > 
         <input type="submit" ...> 
       </form> 

       <div id="forgotyourpassword"> 
         Forgot your password? 
       </div> 
   </div>
</div>

次に、パスワードを忘れた divの余白を調整するだけです。

#forgotyourpassword{
   float: left;
   margin-top: 10px;
}

これは、ラッパーdivが文書にいかなるセミカルな値も追加しないので、私が今思い描くベストソリューションですが、そうでなければ簡単な解決策はないと思います（数学を使用してCSS）。

0
追加された
源 
#content form{
    position: absolute;
    top: 80px;
    right: 0px;
}
#forgot-password{
    height:80px;
}

このようなことをしようとすると、フローからフォームが取り出され、微調整を行わずにその上にリンクが表示されます。 #content形式の最高値と＃忘れたパスワードの高さの値が一致したら、家屋として安全でなければなりません。

場合によっては、絶対配置されたdivのクリアに問題があるかもしれませんが、#contentの高さを設定しているとしますので、ここで問題はありません。

0
追加された
源
私は、 content divに別のイメージを縦横に配置しているので、フローからフォームを取り出すことができないと思います。
追加された 著者 F21, 源
私は関連性のある他のCSSのビットで質問を更新しました。
追加された 著者 F21, 源
任意の高さまたは幅の値とともに、上下の値を使用して、その位置を正確に保持することができます。私がフローのそれを取ると言うとき、私はそれが他の要素の位置に影響を及ぼさないこと、そしてリンクが効果的に流れの中に入ることを意味します。
追加された 著者 daveyfaherty, 源