調整大小時將列表元素保留在同一行中。 CSS液體佈局

我有這個菜單，我發現如何在一個教程，但我只有一個麻煩。當我調整頁面大小時，所有佈局更改爲適合新的窗口大小，但當文本不適合屏幕時，菜單似乎會換行。我希望所有的菜單都保留在一行中，即使窗口的大小太小而不能顯示全部。我嘗試了很多我在這裏找到的黑客，但似乎沒有人爲我工作。這是我使用的CSS。調整大小時將列表元素保留在同一行中。 CSS液體佈局

#navcontainer { 
margin: auto; 
width: 95%; 
} 
#menu 
{ 
width: 100%; 
margin: 0; 
padding: 0 0 0 0; 
list-style: none; 
background: #C2D1DA; 
background: -moz-linear-gradient(#DDE7ED, #C2D1DA); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C2D1DA),color-stop(1, #DDE7ED)); 
background: -webkit-linear-gradient(#DDE7ED, #C2D1DA); 
background: -o-linear-gradient(#DDE7ED, #C2D1DA); 
background: -ms-linear-gradient(#DDE7ED, #C2D1DA); 
background: linear-gradient(#DDE7ED, #C2D1DA); 
-moz-border-radius: 50px; 
border-radius: 50px; 
-moz-box-shadow: 0 2px 1px #9c9c9c; 
-webkit-box-shadow: 0 2px 1px #9c9c9c; 
box-shadow: 0 2px 1px #9c9c9c; 
} 
#menu li 
{ 
float: left; 
padding: 0 0 10px 0; 
position: relative; 
line-height: 0; 
} 
#menu a 
{ 
float: left; 
height: 13px; 
padding: 0 25px; 
color: #1A6B91; 
text-transform: uppercase; 
font: bold 12px/25px Arial, Helvetica; 
text-decoration: none; 
text-shadow: 0 0px 1px #004063; 
} 
#menu li:hover > a 
{ 
color: #333; 
} 
*html #menu li a:hover /* IE6 */ 
{ 
color: #333; 
} 
#menu li:hover > ul 
{ 
display: block; 
} 
/*SUB MENU*/ 
#menu ul 
{ 
list-style: none; 
margin: 0; 
padding: 0; 
display: none; 
position: absolute; 
top: 23px; 
left: 0; 
z-index: 99999; 
background: #DDE7ED; 
background: -moz-linear-gradient(#DDE7ED, #C2D1DA); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C2D1DA),color-stop(1, #DDE7ED)); 
background: -webkit-linear-gradient(#DDE7ED, #C2D1DA); 
background: -o-linear-gradient(#DDE7ED, #C2D1DA); 
background: -ms-linear-gradient(#DDE7ED, #C2D1DA); 
background: linear-gradient(#DDE7ED, #C2D1DA); 
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5); 
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); 
box-shadow: 0 0 2px rgba(255,255,255,.5); 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 
#menu ul ul 
{ 
top: 0; 
left: 190px; 
} 
#menu ul li 
{ 
float: none; 
margin: 0; 
padding: 0; 
display: block; 
-moz-box-shadow: 0 1px 0 #0A486C, 0 2px 0 #1A6891; 
-webkit-box-shadow: 0 1px 0 #0A486C, 0 2px 0 #1A6891; 
box-shadow: 0 1px 0 #0A486C, 0 2px 0 #1A6891;*/ 
} 
#menu ul li:last-child 
{ 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
} 
#menu ul a 
{ 
padding: 10px; 
height: 10px; 
width: 170px; 
height: auto; 
line-height: 1; 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
} 
*html #menu ul a /* IE6 */ 
{ 
height: 10px; 
width: 170px; 
} 
*:first-child+html #menu ul a /* IE7 */ 
{ 
height: 10px; 
width: 170px; 
} 
#menu ul a:hover 
{ 
background: #0186ba; 
background: -moz-linear-gradient(#04acec, #0186ba); 
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
background: -webkit-linear-gradient(#04acec, #0186ba); 
background: -o-linear-gradient(#04acec, #0186ba); 
background: -ms-linear-gradient(#04acec, #0186ba); 
background: linear-gradient(#04acec, #0186ba); 
} 
#menu ul li:first-child a 
{ 
-moz-border-radius: 5px 5px 0 0; 
border-radius: 5px 5px 0 0; 
} 
#menu ul li:first-child a:after 
{ 
content: ''; 
position: absolute; 
left: 30px; 
top: -8px; 
width: 0; 
height: 0; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
border-bottom: 8px solid #DDE7ED; 
} 
#menu ul ul li:first-child a:after 
{ 
left: -8px; 
top: 12px; 
width: 0; 
height: 0; 
border-left: 0; 
border-bottom: 5px solid transparent; 
border-top: 5px solid transparent; 
border-right: 8px solid #DDE7ED;/*cambiar por gradiente*/ 
} 
#menu ul li:first-child a:hover:after 
{ 
border-bottom-color: #04acec; 
} 
#menu ul ul li:first-child a:hover:after 
{ 
border-right-color: #04acec; /*cambiar por gradiente*/ 
border-bottom-color: transparent; 
} 
#menu ul li:last-child a 
{ 
-moz-border-radius: 0 0 5px 5px; 
border-radius: 0 0 5px 5px; 
} 
/* Clear floated elements */ 
#menu:after 
{ 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0; 
}

而菜單結構的HTML代碼在這裏。

<script type="text/javascript"> 
$(function() { 
if ($.browser.msie && $.browser.version.substr(0,1)<7) 
{ 
    $('li').has('ul').mouseover(function(){ 
     $(this).children('ul').show(); 
    }).mouseout(function(){ 
     $(this).children('ul').hide(); 
    }) 
} 
}); 
</script> 
<div id="navcontainer"> 
<ul id="menu"> 
<li><a href="#" onclick="inicio();">Inicio</a></li> 
<li><a href="#">ISO 9001</a> 
    <ul> 
     <li><a href="#">Nueva A.C. o A.P.</a></li> 
     <li><a href="#">Tabla A.C. y A.P.</a></li> 
    </ul> 
</li> 
<li><a href="#" onclick="muestras();">Muestras</a> 
    <ul> 
     <li><a href="#" onclick="muestras();">Solicitud de Muestra</a></li> 
     <li><a href="#" onclick="muestrasPendientes();">Muestras Pendientes</a></li> 
     <li><a href="#">Muestras Terminadas</a></li> 
     <li><a href="#">Garant&iacute;as</a></li> 
     <li><a href="#">Cat&aacute;logo de Productos</a></li> 
    </ul> 
</li> 
<li><a href="#" onclick="proyectos();">Proyectos</a> 
    <ul> 
     <li><a href="#" onclick="proyectos();">Nuevo Proyecto</a></li> 
     <li><a href="#" onclick="proyectosVista();">Proyectos</a></li> 
     <li><a href="#">Nueva Actividad</a></li> 
     <li><a href="#">Actividades Proyectos</a></li> 
    </ul> 
</li> 
<li><a href="#" onclick="tickets();">Tickets</a> 
    <ul> 
     <li><a href="#" onclick="tickets();">Nuevo Ticket</a></li> 
     <li><a href="#" onclick="ticketsAbiertos();">Tickets Abiertos</a></li> 
     <li><a href="#" onclick="ticketsTerminados();">Tickets Terminados</a></li> 
     <li><a href="#" onclick="ticketsPorTerminar();">Tickets por Terminar</a></li> 
    </ul> 
</li> 
<li><a href="#" onclick="iCalendar();">iCalendar</a></li> 
<li><a href="#" onclick="mkt();">MKT</a> 
    <ul> 
     <li><a href="#" onclick="publicidad();">Enviar Boletin</a></li> 
    </ul> 
</li> 
<li><a href="#">Juntas</a> 
    <ul> 
     <li><a href="#">Nuevo Compromiso</a></li> 
     <li><a href="#">Compromisos Abiertos</a></li> 
     <li><a href="#">Compromisos Terminados</a></li> 
     <li><a href="#">Todos los Compromisos</a></li> 
     <li><a href="#">Nueva Minuta</a></li> 
     <li><a href="#">Minutas Anteriores</a></li> 
     <li><a href="#">Calendario de Eventos</a></li> 
     <li><a href="#">Recordar Compromisos</a></li> 
    </ul> 
</li> 
<li><a href="https://www.estatec.com/webmail" target="_blank">Mail</a></li> 
</ul> 
</div> 
* html #menu{ 
zoom: 1; 
} /* IE6 */ 
*:first-child+html #menu{ 
zoom: 1; 
} /* IE7 */

這是菜單，我需要它 http://i.stack.imgur.com/wXLSw.png

這是我 http://i.stack.imgur.com/B01H9.png

我不在乎，如果菜單顯示完整或沒有問題的，但我需要它同一條線。我希望你能幫助我

來源

2012-05-03 Antorni

你需要菜單拉伸嗎？ – jackJoe

是的，菜單隻能改變它的寬度，並且如果某些元素不適合然後隱藏它們。對我而言，最佳解決方案是，當鼠標位於右側角落時，內容開始向左滾動顯示，但我認爲這太難實現了。現在我只想隱藏不適合的對象。我不知道我是否足夠具體。 – Antorni

嘗試「overflow-x：hidden;」在#menu上。 – jake

http://jsfiddle.net/3aSTE/

設置硬高度與#menu和overflow-y:hidden

來源

2012-05-03 18:55:50

哎呀，這消除了懸停狀態！ –

另外這裏是一個響應式下拉菜單的簡單示例http://csscience.com/dropdown-accordion/ –

哇，非常感謝你克里斯托弗它完美的工作。 – Antorni

#menu { 
    width: 100%; 
    margin: 0; 
    padding: 0 0 0 0; 
    list-style: none; 
    background: #C2D1DA; 
    background: -moz-linear-gradient(#DDE7ED, #C2D1DA); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #C2D1DA),color-stop(1, #DDE7ED)); 
    background: -webkit-linear-gradient(#DDE7ED, #C2D1DA); 
    background: -o-linear-gradient(#DDE7ED, #C2D1DA); 
    background: -ms-linear-gradient(#DDE7ED, #C2D1DA); 
    background: linear-gradient(#DDE7ED, #C2D1DA); 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    -moz-box-shadow: 0 2px 1px #9c9c9c; 
    -webkit-box-shadow: 0 2px 1px #9c9c9c; 
    box-shadow: 0 2px 1px #9c9c9c; 
    min-width: 952px; 
}

使用min-width屬性在CSS。

來源

2012-05-03 18:55:07 jake

這是最簡單的可能的答案！

以下兩個屬性只是添加到您的#menu css文件，

text-align: left; 
    width: 1010px;

希望它會工作！

來源

2013-02-01 05:39:27

調整大小時將列表元素保留在同一行中。 CSS液體佈局

回答

相關問題