将浮动导航元素保持在一条线上

Question

我正在构建一个将显示在触摸屏上的“交互式”。其中一个功能是一个固定的页脚导航。我使用浮动的主要导航元素，在每个元素中，有一个图片和文本是并行显示的浮动图片向左。

我大部分时间都在工作，但我有几个问题：

1. 当视口低于触摸屏宽度(1366 up )时，浮动的导航元素相互叠加在一起。我知道这是标准的行为，但我希望保持在一行，并修正，即使是在视口较小(滚动条，ok)。
2. 导航栏的元素必须保持它们的位置(对于每个元素，都有一个图片和文本必须并排，而不是同时在一起)。
3. 需求声明，当活动时，每个元素必须有一个边框围绕它，被粗体化，并被超感知。这会堵塞我的固定宽度元素。我把它拼凑在一起，这样固定的宽度就有足够的空间来容纳从粗体和上部增加的尺寸，但是我不想担心这个问题。

我尝试了空白:现在，但这破坏了导航元素的格式。

这是用于导航的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;
}

你可以在此链接上看到这个页面(点击页面，点击标题页面上的“土著传统”，看看我在说什么)。

Answer 1

1. 您是否尝试过使用Fittext或支持图像的响应性文本插件？这应该是你控制这种行为的最好方法。
2. 您应该将文本和图像同时浮动到左侧，并添加一个清晰的div： .clear{清除:两者均；}
3. 您可以重用Fittext或响应性文本插件来使用if语句来控制这一点，或者您可以在活动时，首先将填充附加到元素上，并将填充空间与边框交换。