0

これには本当に困惑しています。私が少しぼんやりしているのかもしれません。

次の html を検討してください。

        <div id="ebt_info_nav">
            <ul>
                <li><a href="#"><i class="icon-h"></i> Home</a></li>
                <li><a href="#"><i class="icon-i"></i> FAQ</a></li>
                <li><a href="#"><i class="icon-s"></i> Feedback</a></li>            
                <li><a href="#"><i class="icon-b"></i> Bookmark Us</a></li>
                <li><a href="#"><i class="icon-c"></i> Contact Us</a></li>
</ul>


        <div id="ebt_search">
            <form method="post" action="#">
            <input type="text" name="search" placeholder="Search" /><button class="ebt_input_button"><i class="icon-search"></i></button>
            </form>
        </div><!-- / End #ebt_search -->

    <div class="ebt_clear"></div>

</div> <!-- / End #ebt_info_nav -->

そしてこのCSS：

#ebt_info_nav {
width: 98%;
line-height:30px;
margin: 0 1% 1% 1%;
background: #336699;
border-radius: 6px;
background: -moz-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: -webkit-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: -o-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: -ms-linear-gradient(90deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%);
background: linear-gradient(0deg, rgb(44, 85, 128) 0%, rgb(51, 102, 153) 100%); 
padding: 0.5% 0;   
} 


#ebt_info_nav ul {
margin: 0 0 0 10px;
padding: 0;
float: left;
width: 70%;
}

#ebt_info_nav ul li {
list-style-type: none;
float: left;
margin: 0 0.25%;
font-family: 'Open Sans', sans-serif;
font-size: 1.1em;
} 

#ebt_info_nav ul li a {
display:inline-block;
text-decoration: none;
color: #fff;
padding: 0.5% 3%;
text-shadow: 1px 1px #003366;
} 

#ebt_info_nav ul li a:hover {
background: #fff;
color: #336699;
border-radius:6px;
text-shadow: none;
}  

#ebt_search { 
float: right;
padding: 0 1%;
}

画像はこちら http://i44.tinypic.com/2v9aphl.png

IE 10 が項目を折り返すか、スペースを改行に置き換えるのはなぜですか? fontello アイコンを削除しましたが、テキストだけでまだ発生します。

任意のポインタは、感謝して受信されます。

4

1 に答える 1

0

あなたが私たちに与えたものから、あなたはこのようなことを意味していると思います??

http://codepen.io/anon/pen/eIfiF

すみません、私が何をしたか教えてください。

壊れて新しい行に移動するのを止めるために、小さな%パディングを取り除き、display:inline-blockよりフィットするようにしました。float:left;

属性を保持する必要がある場合、または保持したい場合はfloat:left、この行を削除するだけで動作するはずです:

padding: 0.5% 3%;

于 2013-07-26T15:52:12.827 に答える