3

サイトへのナビゲーションメニューを設定していますが、目標を達成するのに苦労しています。ナビゲーションバーには、左上にある入力フィールドがあります。適用したcssルールで入力フィールドの位置が正しく設定されていません。それが位置なのかhtml構造なのかわかりません。下の写真のように、ナビゲーションメニューの上に入力フィールドを並べることができますか？例

ありがとう

HTMLの設定

<div id="header">
  <div id="searchInput"></div>
       <h2>MAINT TITLE PAGE</h2>
  <div id="navigation">

  <ul class="button-list">
    <li><a href="#" class="buttonNav" >Content 1</a></li>
    <li><a href="#" class="buttonNav" >Content 2</a></li>
    <li><a href="#" class="buttonNav" >Content 3</a></li>
    <li><a href="#" class="buttonNav" >Content 4</a></li>
    <li><a href="#" class="buttonNav" >Content 5</a></li>   
   </ul> 

   <li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li>
  </div>


 </div>

CSS

<style>

#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;
}

#au_title {
    color: #FC821D;
    font-size: 120%;
    font-weight: bold;
    left: 515px;
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
    top: -105px;
}

#searchInput {
    left: 700px;
    position: relative;
    top: -180px;
}

#contentNav { color: #cfdae3; }


/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;

}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64;

}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D;

}


.button-list {
    list-style: none outside none;
    overflow: hidden;
}

.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

/* Search CSS: *


    .search-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 

    }

    .search-input li {
    list-style: none outside none;
    }


    .search-submit {
        width: 13px;
        height: 13px;
        border: none;
        background: url(images/mag-glass.png) no-repeat;
        display: block;
        position: absolute;
        left: 26px;
        top: 10px;
        text-indent: -9999em;
    }
    </style>

現在の結果：

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

希望の結果：* ここに画像の説明を入力してください

4

5 に答える 5

2

このリンクjsfiddleを見てください、私はそれがあなたを助けることを願っています

#header{
width: 100%;
}


#navigation {
    float:right;
    margin-top: 80px;
}

#au_title {
    color: #FC821D;
    font-size: 120%;
    font-weight: bold;
    left: 515px;
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
    top: -105px;
}

.search{
float:right;
}
.clearFloat{
    clear:both;
}


#contentNav { color: #cfdae3; }


/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;

}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64;

}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D;

}


.button-list {
    list-style: none outside none;
    overflow: hidden;
}

.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

/* Search CSS: */


    .search-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 

    }

    .search-input li {
    list-style: none outside none;
    }


    .search-submit {
        width: 13px;
        height: 13px;
        border: none;
        background: url(images/mag-glass.png) no-repeat;
        display: block;
        position: absolute;
        left: 26px;
        top: 10px;
        text-indent: -9999em;
    }
于 2012-08-09T07:48:41.607 に答える
1

「検索」要素が<li>正しくラップされていないので、に変更して、ナビゲーションの上とナビゲーションの内側に次のよう<div>に追加します。<h2><div>

    <div id="header">
      <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
      <div id="navigation">
       <h2>MAINT TITLE PAGE</h2>
       <ul class="button-list">
        <li><a href="#" class="buttonNav" >Content 1</a></li>
        <li><a href="#" class="buttonNav" >Content 2</a></li>
        <li><a href="#" class="buttonNav" >Content 3</a></li>
        <li><a href="#" class="buttonNav" >Content 4</a></li>
        <li><a href="#" class="buttonNav" >Content 5</a></li>   
       </ul> 
      </div>
     </div>

次に、このCSSを追加します

.search{
   float:right;
   margin-right:10px;
}

それが理にかなっていることを願っていますか？

于 2012-08-09T07:43:08.153 に答える
1

HTMLコードに間違ったマークアップがあります。検索を行い、最初の子としてLI DIV配置すると完了です。header div

作業デモ

于 2012-08-09T07:52:42.330 に答える
1

CSSスタイル

#search {
 margin-top: -40px;
 text-align:right;
 width: 480px;
 list-style: none;
}

.search { text-align:right; }

divナビゲーションをに置き換えます

<div id="navigation">
<ul id="search"><li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li></ul>
  <ul class="button-list">
    <li><a href="#" class="buttonNav" >Content 1</a></li>
    <li><a href="#" class="buttonNav" >Content 2</a></li>
    <li><a href="#" class="buttonNav" >Content 3</a></li>
    <li><a href="#" class="buttonNav" >Content 4</a></li>
    <li><a href="#" class="buttonNav" >Content 5</a></li>   
  </ul> 
</div>

これがお役に立てば幸いです

于 2012-08-09T07:55:13.067 に答える
0

私はあなたがこれを探していることを願っています：-http：//tinkerbin.com/BTryMLES

HTML

<div id="header">
  <div id="searchInput"></div>

  <div id="navigation">
  <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
  <ul class="button-list">
           <h2>MAINT TITLE PAGE</h2>
    <li><a href="#" class="buttonNav" >Content 1</a></li>
    <li><a href="#" class="buttonNav" >Content 2</a></li>
    <li><a href="#" class="buttonNav" >Content 3</a></li>
    <li><a href="#" class="buttonNav" >Content 4</a></li>
    <li><a href="#" class="buttonNav" >Content 5</a></li>   
   </ul> 


  </div>


 </div>

CSS

body {
    background:#e6e6e6;
}

#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;

}

#au_title {
    color: #FC821D;
    font-size: 120%;
    font-weight: bold;
    left: 515px;
    letter-spacing: 2px;
    position: relative;
    text-transform: uppercase;
    top: -105px;
}

#searchInput {
    left: 700px;
    position: relative;
    top: -180px;
}

#contentNav { color: #cfdae3; }



.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;

}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64;

}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D;

}


.button-list {
    list-style: none outside none;

    clear:both;
}

.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}




    .search-input {
        padding: 0 5px 0 22px;
        border: 2px solid #DADADA;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background: #FFF; 
    width:200px;
        float:right;
        margin-right:175px;
    }

    .search-input li {
    list-style: none outside none;
    }


    .search-submit {
        width: 13px;
        height: 13px;
        border: none;
        background: url(images/mag-glass.png) no-repeat;
        display: block;
        position: absolute;
        left: 26px;
        top: 10px;
        text-indent: -9999em;
    }
于 2012-08-09T08:23:56.317 に答える