Question

我设计了一个html标签。我将float属性应用于它。问题是当我最小化浏览器标签不正确时。这是我的fiddel，

http://jsfiddle.net/raghavendram040/vn1Leuq3/

和javascript是从互联网复制的，所以任何人都可以告诉这个javascript如何工作并应用浮动属性？它真的很有帮助。这是javascript代码，

`

tabs = function(options) {

var defaults = {  
    selector: '.tabs',
    selectedClass: 'selected'
};  

if(typeof options == 'string') defaults.selector = options;
var options = $.extend(defaults, options); 

return $(options.selector).each(function(){

    var obj = this; 
    var targets = Array();

    function show(i){
        $.each(targets,function(index,value){
            $(value).hide();
        })
        $(targets[i]).fadeIn('fast');
        $(obj).children().removeClass(options.selectedClass);
        selected = $(obj).children().get(i);
        $(selected).addClass(options.selectedClass);
    };

    $('a',this).each(function(i){   
        targets.push($(this).attr('href'));
        $(this).click(function(e){
            e.preventDefault();
            show(i);
        });
    });

    show(0);

});         
}tabs('nav ul');

`

Answer 1

DEMO 看我的小提琴。

nav ul
{
 width:100%;
}
nav ul li
{
 width:20%;
}
nav ul li a
{
  text-align: center;
  width:auto;
}

以百分比指定宽度。它会解决你的问题。

更新的答案

DEMO

    @media all and (max-width:320px)
    {
        li
        {
         width:100% !important;
         border: 1px solid red;
        }
        nav
       {
        height: auto !important;
       }
  }

Answer 2

来自nav和ul的后援

height: 28px;

添加

overflow: auto;

你的ul元素。这将阻止您的标签链接消失。如果你想让它们保持一条线，你需要像这样设置你的ul元素min-width属性：

min-width: 800px;

如何为标签应用浮动属性？

2 个答案: