0

この構造の div があります。

<div id="navigation">
    <a href="#">Overview</a>
    <a href="#">Test</a>
    <a href="#">test 2</a>
</div>

これは次のようなものを示しています:

ここに画像の説明を入力

今、「ナビゲーション」内に要素を追加するjqueryコードがあります。問題は、次のようにする方法がわからないことです。

ここに画像の説明を入力

..特にリンクタグが多い場合。

これが「ナビゲーション」のcssです

#navigation{
    background: #efefef;
    height: 40px;
    width: 732px;
}

タグの場合:

#navigation a{
   min-width: 108px;
   padding: 11px;
   display: inline-block;
   text-align: center;
}

ありがとう。

4

2 に答える 2

0

まず、リンクのmax-width代わりに必要です。min-widthまたは、常に親全体に均等に配置したい場合は、width.
この幅は自分で計算する必要があります。ブラウザ自体では計算できないからです。この例では、3 つのリンクがあるため、各リンクの幅は 100/3 = 33.3% である必要があります。

次に、text-overflow などのいくつかのスタイルを追加して省略を処理すると、次のようになります。

#navigation a{
   width: 33.3%;
   float:left;
   padding:11px;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   display:inline-block;
   text-align:center;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

jsフィドル

ご覧のとおり、その間のスペースを取り除くために、それらを浮かせる必要もありました。フロートが必要ない場合は、幅を計算するときにスペースを考慮してください。

于 2013-07-09T07:06:05.763 に答える
0

ここにフィドルリンクがあります 

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }

.wrapper {
    width:940px;
    padding:10px;
    overflow:hidden;
    height:100%;
    margin:0 auto;
    border:1px  solid green;
    background-color:#3D3A40;
    border:8px solid #fff;
}
.spacer {
    clear:both;
    font-size:0;
    line-height:0;
    height:0;
    }
p {
    padding-bottom:18px;
    }

#navigation{
    background:#efefef;
    height:40px;
    font-size:14px;
    line-height:40px;
}
#navigation li {
    float:left;

    }
#navigation li a{
    padding:0 19px;
    display:block;
    text-align:center;
    color:#35B4DE;
    text-decoration:none;
    float:left;
}
#navigation li a:hover,
#navigation li a.active {
     background:#35B4DE;
    color:#fff;
    }
#navigation li span {
    width:15px;
    height:15px;
    background-color:#FF0000;
    margin:13px  0 0 10px;
    display:block;
    float:right;
    }
#navigation li i.arrow {
    line-height:40px;
    color:#fff;
    background-color:#35B4DE;
    display:block;
    float:right;
    padding:0 5px;
    }
#navigation li i.arrow a {
    padding:0;
    color:#fff;
    background-color:#35B4DE;
    }

JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#navigation li.icon a").append("<span></span>");
        $("#navigation li:last").append("<i class='arrow'><a href='#'>&raquo;</a></i>");
    });
</script>
于 2013-07-09T07:28:19.223 に答える