0

したがって、私は明らかに CSS の上級者ではありませんが、通常は自分でこれらを理解できますが、今回はそうではありません。

検索ボタンを入力フィールドの左にフロートさせようとしていますが、これはすべてヘッダーの絶対位置で発生しています。

いくつかの不適切なショートカットを使用して自分のものを好きなように配置する可能性があると確信していますが、エクスプローラーで表示することはできましたが、クロムでは機能しません (明らかに Firefox も)

私の問題に関連するhtml：

    <div id="search-bar">
                    <div id="search-input">
                        <form action="#" method="get">
                            <p class="search"> 
                                <input type="text" name="search" id="search" />
                            </p>
                            <p class="submit"> 
                                <input type="submit" value="Search" />
                            </p>
                            <div class="clear"></div>
                        </form>
                    </div>
                </div>

そしてCSS：

#search-input p{
margin:0;
padding:0;
border:0;
outline:0;
}

#search-bar{
position:absolute;
bottom: -10px;
right:0;
height: 55px;
width: 500px;
background: #e6e5e5;
border-radius: 10px;
}
#search-input{
position:absolute;
bottom: 10px;
right: 20px;
}

#search-input #search{
float:left
}

#search-input .submit input{
float:left
}

input{     
    border: solid 1px #E5E5E5;  
    outline: 0;  
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 370px;
    padding: 8px;
    background: #FFFFFF;  
}  

input:hover, input:focus {   
    border-color: #C9C9C9;   
} 

.submit input {  
    width: auto;  
border: solid 1px #617798;
    background: #617798;  

font-size: 14px;  
    color: #FFFFFF;  
}

.submit input:hover {  
    background: #7187a8
}

または、問題がもっと深いところにある場合は、ここに私の練習フォルダへのリンクがあります: http://www.gfortin.com/css_practice/page.html

それを修正する方法を知り、私の悪い習慣を教えてもらいたいです。

ありがとう。

4

3 に答える 3

0

まず、入力フィールドを段落フィールドに格納するのは適切な形式ではないと思います。それらを div に配置しますが、機能しているように見えるので、それを選択してください。

つまり、これは CSS の問題ではなく、HTML の問題です。HTML がどのように構造化されているかを見ると、実際には DOM で .submit クラスの前に .search クラスがあります。これは、これらの要素を配置するときに、.search クラスが最初に配置されることを意味します。

HTML の配置を切り替える場合は、簡単に修正できます。解決策を HTML ではなく CSS で調べたことが原因だったと思います。

   <form action="#" method="get">
        <div class="submit">
            <input type="submit" value="Search" />
        </div>
        <div class="search">
            <input type="text" name="search" id="search" />
        </div>
        <div class="clear"></div>
    </form>
于 2013-07-09T01:06:21.580 に答える