Question

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

我大部分时间都在努力，但我有一些问题：

当视口低于触摸屏宽度（1366px）时，浮动的导航元素会叠加在一起。我知道这是标准行为，但我想将它们保持在一条线上，即使在视口较小时也可以修复（滚动条确定）。
导航栏的元素必须保持其位置（对于每个元素，都有一张图片和文字必须并排放置，而不是在彼此的顶部）
要求声明，当激活时，每个元素必须在其周围有边框，加粗和大写。这会堵塞我的固定宽度元素。我把它拼凑在一起，使得固定宽度包含足够的空间以容纳从粗体和大壳增加的尺寸，但我不想担心这一点。

我尝试过white-space：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;
}

您可以在this link看到该页面（点击页面，点击标题页上的“土着传统”，看看我在说什么）

Answer 1

您是否尝试过使用Fittext或支持图片的自适应文本插件？这应该是您控制此行为的最佳方式。
你应该浮动文本和图像到 left 并添加一个明确的div：

.clear {明确：两者;}
您可以重复使用Fittext或响应式文本插件来使用 if 语句来控制它，或者您最初可以将 padding 附加到元素并交换<活动时，带有边框的em> padding 空间。

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

1 个答案: