html - 在 DIV 样式菜单中跨行跨行文本

Question

所以首先我想为下面的代码转储道歉，但我认为它与问题相关...

我在 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&nbsp;and&nbsp;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&nbsp;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&nbsp;Link</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/buddhas-tree.html"><span>Buddhas&nbsp;Tree</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/canadian-xpress.html"><span>Canadian&nbsp;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&nbsp;Nutrients</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/dutch-pro.html"><span>Dutch&nbsp;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&nbsp;Form</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/flower-dragon.html"><span>Flower&nbsp;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&nbsp;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&nbsp;White</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/green-planet.html"><span>Green&nbsp;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&nbsp;And&nbsp;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&nbsp;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&nbsp;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&nbsp;Nutrients</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-additives/rock-nutrients.html"><span>Rock&nbsp;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&nbsp;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&nbsp;Meters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ec-meters.html"><span>Ec&nbsp;Meters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/nutrient-heaters.html"><span>Nutrient&nbsp;Heaters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-buffers.html"><span>pH&nbsp;Buffer's</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-meters.html"><span>&nbsp;pH&nbsp;Meters</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-test-indicator.html"><span>pH&nbsp;Test&nbsp;Indicator</span></a><a class="itemMenuName level2" href="http://leedshydroponics.com/nutrients/nutrient-management/ph-updown.html"><span>pH&nbsp;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>        

Answer 1

您可以为列表项 ( <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>