Question

我希望下拉列表具有更多宽度，因为我希望字符串“IT硬件”内联。但我的李宽度并没有扩大。所以字符串“IT硬件转到新线”我需要每行一行另外，我试着显示：block;和边距：自动文本到水平中心，但它不成功。编辑：抱歉我的错误是将水平文本居中，只需使用text-align：center;

$(document).ready(function(){
  $("#nav ol li").hover(function(){
    $(this).find("ol").show();   //when onmouseover  //ol ใน nav ol li อีกชั้นนึง
  },
  function(){  //when mouseout
    $(this).find("ol").hide();
  });
});

html,body{margin:0px;padding:0px;}
body{background:#cceeff;font-family:"verdana"; }
#wrapper{margin:auto;padding:0px;width:75%;}
#header{margin:0px;padding:0px;width:100%;height:18vh;float:left;
	background: #99d6ff;
	background-image: url("http://co.lnwfile.com/_/co/_raw/0a/el/r0.jpg"); /* fallback */
	background-image: url("http://co.lnwfile.com/_/co/_raw/0a/el/r0.jpg"), linear-gradient(#99d6ff, #006bb3); /* W3C */
                
	background-blend-mode: multiply;
	/*background-position: 10% 50%; มีsize 100% so this will not work*/
	background-size: 100%;
	background-repeat: no-repeat;
}
#header h1{margin:0px;padding:0px;/*border-bottom:1px solid #eee;*/font-size:20px;padding-bottom:10px;}
#nav{margin:0px;padding:0px;width:100%;float:left;
	background: #80ffe5; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol{list-style:none;margin:0px;padding:0px;}
#nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
#nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}

#nav ol li:hover{background:lightgreen;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	transition: background-color 0.5s ease-out;
}
#nav ol li ol li:hover{background:lightgreen;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	transition: background-color 0.5s ease-out;
}
#nav ol ol{position:absolute;top:35px;left:0px;display:none;z-index: 1;
	background: #80ffe5; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */
}
#nav ol ol li{border-bottom:solid 1px lightgrey;width:100%;}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
</head>

<body>

<div id="wrapper">
<div id="header">
          <h1>
    <p></p>
  </h1>
</div>
<div id="nav">
	<ol>
        <li><a href="<?php echo base_url();?>index.php/home">Home</a></li>
        <li> <a href="#"> Product </a>
            <ol>
                <li><a href="#">IT Hardware</a></li>
                <li><a href="#">xxxxx</a></li>
                <li style="border:none;"><a href="#">xxxxxx</a></li>
            </ol>
                </li>
        <li><a href="#">Contact us</a></li>
	</ol>
</div>
</div>
</body>
</html>

Answer 1

使用它。

#nav ol a{
       white-space: nowrap;
     }

这是你的小提琴：https://jsfiddle.net/gg01gt33/

Answer 2

将white-space: nowrap; css属性添加到li的{{1}}代码

<a>

}

Answer 3

您是否尝试在min-width: auto;类的CSS中使用.dropdown-menu？ Bootstrap为下拉列表设置了默认值min-width: 160px;。

检查下面的图片

下拉<li>宽度不延长/ margin-auto无效

3 个答案: