我正在构建一个将显示在触摸屏上的“交互式”。其中一项功能是固定的页脚导航。我将浮动用于主要导航元素，并且在每个元素中，通过将图片浮动到左侧来并排显示图片和文本。
我大部分时间都在工作，但我有一些问题：
- 当视口低于触摸屏宽度 (1366px) 时，浮动导航元素会相互叠加。我知道这是标准行为，但我想将它们保持在一条线上并固定，即使视口较小（滚动条正常）。
- 导航栏的元素必须保持它们的位置（对于每个元素，有一个图片和文字必须保持并排，而不是在彼此之上）
- 要求规定，当处于活动状态时，每个元素都必须有一个边框，并且是粗体和大写的。这堵塞了我的固定宽度元素。我已经将它拼凑在一起，这样固定宽度包含足够的空间来适应粗体和大写所增加的大小，但我很想不必担心这一点。
我试过空格：nowrap；但这破坏了导航元素的格式。
这是导航的 HTML（是的，我在调整时使用内联样式，我知道这很糟糕）。不幸的是，为了让元素正确对齐，它们都需要不同的固定宽度。任何关于这方面的想法都会很棒。
<div style="background-color: white !important" class="navbar navbar-fixed-bottom">
<ul class="nav" style="background-color:white !important; max-width: 1366px; ">
<li class="" style="padding-top:0px; width:110px;">
<a class="bootstrap-override" style="background-color: white; box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important;" href="/projects/dev/mediacombo/public/title"><img src="img/logo-nav-bar.png"></a>
</li>
<li style="width:200px; padding-top:10px;" class="active" >
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/vignette">
<img class="bardnav-item-image nav-img" src="img/icon-1.png">
<p class="bardnav-item-text">Indigenous Traditions</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:176px;">
<a class="bootstrap-override" href="#">
<img class="bardnav-item-image nav-img" src="img/icon-2.png">
<p class="bardnav-item-text">Industrial Embroidery</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:156px;" >
<a class="bootstrap-override" href="#">
<img class="bardnav-item-image nav-img" src="img/icon-3.png">
<p class="bardnav-item-text">Modern American Silks</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:192px;">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/beller">
<img class="bardnav-item-image nav-img" src="img/icon-4.png">
<p class="bardnav-item-text">American Made Fashion</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:142px;">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/batiks">
<img class="bardnav-item-image nav-img" src="img/icon-5.png">
<p class="bardnav-item-text">Modern American Batiks</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:118px;">
<a class="bootstrap-override" href="#">
<img class="bardnav-item-image nav-img" src="img/icon-6.png">
<p class="bardnav-item-text">Art in Dress</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:140px;">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/tea_gowns">
<img class="bardnav-item-image nav-img" src="img/icon-7.png">
<p class="bardnav-item-text">Tea Gowns</p>
</a>
</li>
<li style="width:1px;">
<img src="img/border.png">
</li>
<li style="width:98px; padding-top:0px">
<a class="bootstrap-override" href="/projects/dev/mediacombo/public/about_main">
<img style="margin-top:10px;" src="img/link-red.png">
<h5 style="max-width:100px;">About the Exhibition</h5>
</a>
</li>
</ul>
</div>
CSS：
.bardnav-item-text{
margin-left: 5px !important;
margin-right: 5px !important;
font-weight: normal;
font-size: 13px;
}
.active{
color: #8B0E04 !important;
font-weight: bold !important;
border-bottom: 5px solid #ddd2cc;
border-right: 5px solid #ddd2cc;
border-left: 5px solid #ddd2cc;
padding: 10px 0 10px 0;
}
.active > a > p{
color: #8B0E04 !important;
font-weight: bold !important;
text-transform: uppercase !important;
}
.nav > li{
padding:10px 0 10px 0;
}
.about-active{
margin-right:10px;
margin-bottom:10px;
padding:0 0 0 0;
}
.bootstrap-override{
background-color: white !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.nav-img{
float:left;
}
你可以在这个链接上看到这个页面（点击页面，点击标题页上的“土著传统”看看我在说什么）