2

編集：jsFiddleを追加：http ：//jsfiddle.net/gdHuh/

私のページには、下の境界線のあるタイトルがあります。タイトルと境界線の間にパディングがあります。タイトル領域の右側に浮かび、下の境界線に触れると、検索ボックスが表示されます。これがどのように見えるかです：

ここに画像の説明を入力してください

ただし、タイトルと検索ボックスのテキストが長すぎる場合、タイトルテキストの一部が検索ボックスによって非表示になります。

ここに画像の説明を入力してください

これは私がこのような場合にそれをどのように見せたいかです：

ここに画像の説明を入力してください

これが私のHTMLです：

<div class="row">
    <div class="column column8">
        <h1>Internship Reviews &amp; Rankings</h1>
    </div>
    <div class="findTop column column8">
        <div class="greyShaded findTab">
            <img class="verticalBottom" src="images/blueMagnify.png"/> 
            <a>Find an Internship Program</a> 
            <img class="verticalTextTop" src="images/greyArrowheadRight.png"/>
        </div>
    </div>
</div>

そしてCSS：

/* More Specific CSS */    
.findTab{
    float: right;
    margin: 0px 5px;
    padding: 5px 10px;
    font-weight: bold;
    line-height: 24px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #f5f5f5;
    font-family: "Helvetica Neue", arial, helvetica, sans-serif;
    font-size: 13px;
}
.findTop{
    border-bottom: 1px solid #ddd;
    margin-top: -23px;
}

/* More general CSS */
.row {
    clear: both;
    width: 100%;
    position: relative;
}
.column {
    margin: 0 15px;
    float: left;
    border: 0;
    padding: 0;
    position: relative;
}
.column8 {
    width: 610px;
}
h1{
    font-size: 28px;
    line-height: 32px;
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue", arial, helvetica, sans-serif;
    font-weight: bold;
}

要素が正しく配置されるようにHTMLとCSSを変更するにはどうすればよいですか？

4

3 に答える 3

6

これが私の結果のフィドルです

私が使用した別のクラスを追加しないように

.row div:nth-of-type(1){
  width:300px;
  margin-right:-20px;
}

また、 を削除して.column8に置き換えまし.row divた。このコード形式では、それが最も適切であるためです。

編集

もう 1 つの方法は、すべてのコードを同じに保つことですが、追加することです。

h1 {
  width:300px;
}

フィドル

このオプションは、探しているものに近いようです

于 2012-12-26T17:26:56.283 に答える
1

この場合、あなたを助けることができる最良の方法はjQueryを使用していると思います。コードを少し修正したところ、次のようになりました。「結果」領域のサイズを変更して、すべてが正常であることを確認できます。また、css プロパティで遊ぶこともできwhite-spaceます (クラス 'title' に追加します)。

于 2012-12-26T17:11:27.433 に答える
0

1 つの答えは、タイトルの幅のパーセンテージを設定して (さまざまな画面サイズに対応できるようにするため) white-space: pre、テキストを折り返すことです。より具体的なアドバイスについては、フィドルを立てる必要があります。

于 2012-12-26T17:37:22.763 に答える