7

要素の境界線が要素の全長にまたがらないようにする方法を知りたいです。line-height を使用するためのいくつかの提案を見てきましたが、それは私にはうまくいかないようです (少なくとも、<ul>私が使用しているタグではそうではありません)。

これを行っている人の一般的な例は、 http://android.comでの検索で、この種の効果がありますが、css に関連するものは何も見つかりません。

元：

http://i.stack.imgur.com/cTn5i.png

4

5 に答える 5

11

ミックスの別のオプションを次に示します。box-shadow私のお気に入りの新しい CSS 機能の 1 つになりつつあります...

追加のマークアップなし、CSS のみ (および疑似要素なし)...

デモ: http://jsfiddle.net/npsMx/2/

HTML

<input type="text" class="search" />

CSS

.search {
    border: 0px solid blue;
    border-bottom-width: 1px;
    -webkit-box-shadow: -5px 4px 0px -4px blue;
       -moz-box-shadow: -5px 4px 0px -4px blue;
            box-shadow: -5px 4px 0px -4px blue;
}

box-shadowオンを左側だけに強制します。に設定すると-5px、左側の幅がちょうどそれだけに設定されます...-4px後で効果的にシャッフルすると、1ピクセルだけが表示されたままになります（つまり、border-bottom-width.

説明するのは難しいですが、値で遊んでみると簡単にわかります!

于 2013-09-09T20:25:40.357 に答える
3

例のマークアップを見てください。

<div class="search" id="search-container">
    <div class="search-inner">
        <div id="search-btn"></div>
        <div class="left"></div>
        <form action="/search/" id="search" name="search">
            <input id="q" name="q" placeholder="Search" speech="" type="text" x-webkit-speech="">
        </form>
   </div>
</div>

あなたが探しているのは<div class="left">..CSSを見てください：

.search:hover .bottom, .search:hover .left, .search:hover .right {
    background-color: #33b5e5;
}

これが、左側の小さな青い線を作成しているものです..

疑似要素は入力では機能しないため、疑似要素について述べたことを取り消します...これを正しく実現するには、ラッパーを使用する必要があります..

于 2013-09-09T19:53:11.257 に答える
2

入力要素の周りにラッパーを使用する 1 つのアプローチを次に示します。

次の HTML があるとします。

<div class="input-wrap">
    <input type="text" value="Search...">
</div>

次の CSS を適用します。

.input-wrap {
    display: inline-block;
    position: relative;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    height: 10px;
    width: 100px;
}
.input-wrap input {
    position: absolute;
    bottom: 0;
    left: 0;
    width: inherit;
    border: none;
    background-color: beige;
}

フィドル: http://jsfiddle.net/audetwebdesign/rLCHa/

この構成では、外側の.input-wrap要素が入力フィールドと下の境界線の幅、および左の境界線の高さ (この例では 10px) を制御します。

入力フィールドは絶対に配置され、親コンテナーの下部に固定され、幅を継承します。.input-wrap入力フィールドの高さはデフォルト値ですが、要素に設定された高さとは別に制御できます。

于 2013-09-09T19:57:23.320 に答える
0

別の解決策は、div を左の境界として絶対に配置することです。

    .box {width:205px; position:relative;}
    .line {width:1px; height:10px; background:#ff0000; position:absolute; left:0; bottom:2px;}
    input {width:180px; background:#fff; color:#000; border:0; border-bottom:1px solid #ff0000; padding:5px 10px; position:absolute; left:1px; bottom:0;}

html

<div class="box">
<div class="line"></div>
<input type="text" value="Search" />
</div>

jsfiddle の例

于 2013-09-09T20:15:31.133 に答える