jQuery選項卡是網站開發中常用的一種功能，常見的選項卡有垂直和水平兩種形式。如果選項卡的內容不夠多，而選項卡又比較寬，此時可以考慮使用橫向填充的方式優化選項卡的展示效果。

實現橫向填充的方法如下：

HTML代碼：
<div class="tab">
<ul>
<li>選項卡一</li>
<li>選項卡二</li>
<li>選項卡三</li>
</ul>
<div class="tab-content">
<div>選項卡一的內容</div>
<div>選項卡二的內容</div>
<div>選項卡三的內容</div>
</div>
</div>
CSS代碼：
.tab {
width: 100%;
height: 300px;
}
.tab ul {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
margin: 0;
padding: 0;
}
.tab li {
list-style: none;
cursor: pointer;
width: calc(100% / 3);
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ccc;
}
.tab li.active {
background-color: #fff;
}
.tab-content {
width: 100%;
height: 250px;
box-sizing: border-box;
padding: 10px;
}
.tab-content div {
width: 100%;
height: 100%;
display: none;
}
.tab-content div.active {
display: block;
}

在HTML代碼中，我們首先創建一個class為"tab"的div，內部包含一個ul和一個class為"tab-content"的div。ul用于包含選項卡的各個選項，"tab-content"用于包含選項卡的內容。

在CSS代碼中，我們通過設置ul的display為flex，實現橫向填充的效果。同時，我們通過計算li的寬度，實現了選項卡平分父元素的效果。用樣式類".active"來控制選中的選項卡以及選項卡對應的內容是否顯示。通過這些設置，我們就實現了橫向填充的選項卡效果。