所以首先我想为下面的代码转储道歉，但我认为它与问题相关...
我在 LeedsHydroponics.com/ 有一个可爱的菜单但是我在重新设计菜单时遇到了一些问题。我们添加了大量新类别，因此菜单现在对于当前情况来说太大了。理想情况下，我想修改菜单，使文本从看起来像文本跨越一行的当前情况发生变化 
更像是文本跨越多行的前几项 
或者更好的例子可能是这样的 
希望如果我能让它工作，我们应该能够将所有 16 个类别都放在菜单上......虽然这可能很困难哈哈......
感谢期待!!
希望所讨论的想法也能帮助其他有类似 DIV 菜单格式问题的人
.pt_custommenu {
font-size: 14px;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
z-index: 1000;
background: url("../images/bg-menu.gif") repeat-x;
}
.pt_custommenu div.pt_menu {
float: left;
background: url("../images/bg-right-menu.png") no-repeat right;
}
.pt_custommenu div.pt_menu .parentMenu a,
.pt_custommenu div.pt_menu .parentMenu span.block-title{
padding: 0px 4px;
margin:0 2px 0 1px;
font-size: 12px;
line-height: 53px;
float:left;
cursor: pointer;
}
.pt_custommenu div.pt_menu.active {
/*background:url("../images/bg-hover-menu.png") repeat-x 0 0;*/
/* background:#000;
margin-right:2px;*/
}
.pt_custommenu div.popup {
position:absolute;
z-index:3000;
background-color:#fb5b06;
text-align:left;
padding: 15px;
margin: 0;
}
.pt_custommenu div.pt_menu .parentMenu a:hover,
.pt_custommenu div.pt_menu .parentMenu span.block-title:hover,
.pt_custommenu #pt_menu_link ul li a.act,
.pt_custommenu #pt_menu_link ul li a:hover {
background:url("../images/bg-hover-menu.png") repeat-x 0 0;
margin:0 2px 0 1px;
}
#pt_menu_pt_item_menu_custom_menu.active span {
background:url("../images/bg-hover-menu.png") repeat-x 0 0;
margin: 0 2px 0 1px;
}
.pt_custommenu div.pt_menu.act a, .pt_custommenu div.pt_menu.active .parentMenu a{
background:url("../images/bg-hover-menu.png") repeat-x 0 0;
}
#pt_menu_home a {margin: 0 2px 0 0; background: url("../images/bg-home.png") no-repeat 50% 45%; text-indent: -9999px; width: 30px; }
#pt_menu_home a:hover { background: url("../images/bg-home.png") no-repeat 50% 45% #FB7906; }
#pt_menu_home.act {background: url("../images/bg-right-menu.png") no-repeat scroll right center #FB7906; }
.pt_custommenu div.popup a {
text-decoration: none;
display:block;
line-height: 32px;
}
.header-menu {width: 100%; margin: 0 0 20px;}
.pt_custommenu .itemMenu h4.level1,
.pt_custommenu .itemMenu a.level1{
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.pt_custommenu .itemMenu h4.level1,
.pt_custommenu .itemSubMenu h4.level2 span{
color: #897725;
}
.pt_custommenu .itemSubMenu h4.level2,
.pt_custommenu .itemSubMenu a.level2,
.pt_custommenu .itemSubMenu h4.level3,
.pt_custommenu .itemSubMenu a.level3,
.pt_custommenu .itemMenu a.level1.nochild{
background: url("../images/black-dot.jpg") no-repeat left center;
color: #fff;
padding-left: 8px;
text-transform: none;
font-weight: normal;
font-size: 12px;
}
.pt_custommenu .itemSubMenu a.level2:hover,
.pt_custommenu .itemMenu a.level1.nochild:hover{
color: #000;
}
.pt_custommenu div.popup a.actParent {
color: #4D4D4D;
}
.pt_custommenu div.popup a.act {
color: #A52A2A !important;
}
.pt_custommenu div.column {
float:left;
width:200px; /* column width */
margin-right: 5px;
padding-right: 5px;
}
.pt_custommenu div.column.last {
border-right: 0 none;
margin-right: 0;
padding-right: 0;
}
.pt_custommenu div.itemSubMenu {
}
.pt_custommenu .block2{
margin-top: 10px;
float: left;
color:#fff;
}
.pt_custommenu div.popup .block1{
overflow: hidden;
float: left;
}
.pt_custommenu div.popup .block1 .column{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.pt_custommenu div.popup .blockright img{
max-width: 100%;
}
.pt_custommenu div.pt_menu .parentMenu p{
margin: 0;
padding: 0;
}
.pt_custommenu #pt_menu_link{
padding: 0;
}
.pt_custommenu #pt_menu_link .parentMenu ul li{
float: left;
list-style: none;
}
.pt_custommenu #pt_menu_link .parentMenu ul li a{
float: left;
padding: 0 10px;
display: block;
}
.pt_custommenu .clearBoth {
clear:both;
}
@media (max-width: 1060px) {
.pt_custommenu div.pt_menu .parentMenu a,
.pt_custommenu div.pt_menu .parentMenu span.block-title{
font-size: 13px;
}
}<div class="nav-container visible-desktop">
<div class="header-menu">
<div class="container">
<div id="pt_custommenu" class="pt_custommenu">
<div id="pt_menu_home" class="pt_menu act">
<div class="parentMenu">
<a href="http://leedshydroponics.com/">
<span>Home</span>
</a>
</div>
</div> <div id="pt_menu9" class="pt_menu">
<div class="parentMenu">
<a href="http://leedshydroponics.com/nutrients.html">
<span>NUTRIENTS</span>
</a>
</div>
<div id="popup9" class="popup" style="width: 410px; top: 45px; left: 40px; display: none;">
<div class="block1" id="block19" style="width: 410px;">
<div class="column first col1"><div class="itemMenu level1"><a class="itemMenuName level1" href="http://leedshydroponics.com/nutrients/nutrient-additives.html"><span>Nutrients and Additives</span></a><div class="itemSubMenu level1"><div class="itemMenu level2"><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/advanced-nutrients.html"><span>Advanced Nutrients</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/atami.html"><span>Atami</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/biobizz.html"><span>Biobizz</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/boontabud.html"><span>Boontabud</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/bud-link.html"><span>Bud Link</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/buddhas-tree.html"><span>Buddhas Tree</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/canadian-xpress.html"><span>Canadian Xpress</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/canna.html"><span>Canna</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/cyco-nutrients.html"><span>Cyco Nutrients</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/dutch-pro.html"><span>Dutch Pro</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/dutchmaster.html"><span>Dutchmaster</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/flair-form.html"><span>Flair Form</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/flower-dragon.html"><span>Flower Dragon</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/foxfarm.html"><span>Foxfarm</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/future-harvest.html"><span>Future Harvest</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/g-e-t.html"><span>G.E.T</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/great-white.html"><span>Great White</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/green-planet.html"><span>Green Planet</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/grotek.html"><span>Grotek</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/growstar.html"><span>Growstar</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/hesi.html"><span>Hesi</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/house-and-garden.html"><span>House And Garden</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/hygrozyme.html"><span>Hygrozyme</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/ionic.html"><span>IONIC</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/liquid-rox.html"><span>Liquid Rox</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/nitrozyme.html"><span>Nitrozyme</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/plant-magic.html"><span>Plant Magic</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/essentials.html"><span>ESSENTIALS</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/superthrive.html"><span>Superthrive</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/vitalink.html"><span>Vitalink</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/remo-nutrients.html"><span>Remo Nutrients</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/rock-nutrients.html"><span>Rock Nutrients</span></a></div></div></div></div><div class="column last col2"><div class="itemMenu level1"><a class="itemMenuName level1" href="http://leedshydroponics.com/nutrients/nutrient-management.html"><span>Nutrient Management</span></a><div class="itemSubMenu level1"><div class="itemMenu level2"><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/combo-meters.html"><span>Combo Meters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ec-meters.html"><span>Ec Meters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/nutrient-heaters.html"><span>Nutrient Heaters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-buffers.html"><span>pH Buffer's</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-meters.html"><span> pH Meters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-test-indicator.html"><span>pH Test Indicator</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-updown.html"><span>pH Up/Down</span></a><div class="itemSubMenu level2"><div class="itemMenu level3"><a class="itemMenuName level3" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-updown/canna.html"><span>Canna</span></a><a class="itemMenuName level3" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-updown/ph-updown.html"><span>Essentials</span></a></div></div></div></div></div></div>
<div class="clearBoth"></div>
</div>
</div>
</div> 最佳答案
您可以为列表项 ( <li> ) 提供以下样式:
li {
display: inline-block;
float: left;
}
示例:
nav {
display: block;
background-color: rgb(15,15,15);
width: 560px;
height: 50px;
}
nav img {
width: 50px;
height: 50px;
background-color: rgb(255,191,0);
}
nav img {
float:left;
}
nav li {
display: inline-block;
float: left;
width:100px;
height: 50px;
line-height:25px;
padding: 0;
border-left:1px solid rgb(0,0,0);
border-right: 1px solid rgb(63,63,63);;
color: rgb(255,255,255);
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase
}
nav li:hover {
color: rgb(255,191,0);
background-color: rgb(31,31,31);
cursor: pointer;
}<nav>
<img />
<ul>
<li>The Quick</li>
<li>Brown Fox Jumps</li>
<li>Jumps Over Fox</li>
<li>The Lazy Brown</li>
<li>Dog The Quick</li>
</ul>
</nav>关于html - 在 DIV 样式菜单中跨行跨行文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35190594/