Programmer pg = new Programmer();
但是老闆認為我是 泛型設計師
Programmer<美工> pg = new Programmer<美工>();
吸ㄟ死ㄟ死表示：呵呵呵
需求很簡單 一個 TAB 頁籤
條件是 自適寬度
常見的有兩種 1. ul li 2. div
<head>
<style>
/*消除 body 預設
margin padding*/
body
{
margin: 0;
padding: 0;
}
#divTab, #liTab
{
min-width: 300px;
}
#divTab div, #liTab li
{
width: 20%;
float: left;
background-color: #ccc;
border: 1px solid #000;
margin: 0;
padding: 0;
}
/*消除 li 預設 margin padding*/
#liTab
{
margin: 0;
padding: 0;
}
.clear
{
clear: both;
height: 100px;
}
</style>
</head>
<body>
<div class="clear"></div>
<div id="divTab">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
<div class="clear"></div>
<ul id="liTab">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</body>
但是這個結果令人不悅 1. 兩個 tab 中間的線是 2px 2. 最後一個 Tab 被擠下去
這是因為 border 1px 撐開了寬度 於是我們把 margin 改為 -1px
#divTab div, #liTab li
{
width: 20%;
float: left;
background-color: #ccc;
border: 1px solid #000;
margin: -1px;
padding: 0;
}
現在好多了 就這樣發佈吧
但是牢版跟剋扈卻說 下面這個捲軸我不想看到
我直覺會想用 overflow: hidden; 但是我設了 min-width 這樣會使得小於最小寬度的時候 也沒有捲軸 這並不是我所要的
這時候回歸原點 為何會冒出這個捲軸 明明都把 margin -1 了
觀察一下 我就像華生突破了盲點 因為網頁 預設的起點是在左上角的 起點左方的內容不會顯示 但是右方則無限制
我看不到最左邊的 border (起點之外) 但是可以看到最右邊的 border
解決的方法很簡單 就讓這條 border 蒸發就好了
#divTab div:last-child, #liTab li:last-child
{
border-right-style: none;
}
沒有留言:
張貼留言