如何在我的情況下爲我的李元素設置邊框

我想我的第二列在我的例子中顯示一個虛線的邊界一直到底部。

#wrapper { 
 
    
 
    background-color: yellow; 
 
    top: 88px; 
 
    left: 55px; 
 

 
} 
 

 
#wrapper li{ 
 
    width: 120px; 
 
    height: 50px; 
 
    padding-top: 15px; 
 
} 
 

 
#col1{ 
 
    display: table-cell; 
 
} 
 

 

 
#col2{ 
 
    border-left: dotted 2px grey; 
 
    height: 100%; 
 
} 
 

 

 
#col3{ 
 
    border-left: dotted 2px grey; 
 
}

<div id='wrapper'> 
 
    <div class="row"> 
 
     <div id='col1' class="col-xs-4"> 
 
      <ul> 
 
       <li> 
 
        <a href=''>col-1</a> 
 
       </li> 
 

 
      </ul> 
 
     </div> 
 

 
     <div id='col2' class="col-xs-4"> 
 
      <ul> 
 
       <li> 
 
        <a href=''>col -2</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id='col3' class="col-xs-4"> 
 
      <ul> 
 
       <li> 
 
        row 1 
 
       </li> 
 
       <li> 
 
        row 2 
 
       </li> 
 
       <li> 
 
        row 3 
 
       </li> 
 
       <li> 
 
        row 4 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

的jsfiddle http://jsfiddle.net/Mcq6u/17/

我怎樣才能做到這一點？非常感謝！

來源

2014-09-24 FlyingCat

@MelanciaUK HTML，身體，.row，#wrapper指定{身高：100％; }會將#wrapper拉伸到整個頁面的高度，但它似乎並不打算如此。 – Arbel 2014-09-24 21:57:57

@Arbel我剛剛注意到了這一點。我正在調整它，但這個想法是一樣的。 – melancia 2014-09-24 21:58:39

'＃wrapper'定義了'top'和'left'，但沒有'position'。 – melancia 2014-09-24 21:59:24

您可以簡單地添加：

.row{ 
     display:table-row; 
    } 

    .col-xs-4 { 
     display: table-cell; 
     float: none; 
    }

的jsfiddle：http://jsfiddle.net/Mcq6u/29/

來源

2014-09-24 22:42:37

正確的點。不能upvote（達到每日投票門檻），但肯定會做。 – melancia 2014-09-24 22:47:53

謝謝。很高興它對你有效。歡呼:) – 2014-09-24 22:48:32

對不起老兄。我不是OP。我對周圍的一個快速解決方案感到好奇。 – melancia 2014-09-24 22:49:20

您可以定義列的特定高度。看到這個新代碼：

CSS：

#wrapper { 
    background-color: yellow; 
    top: 88px; 
    left: 55px; 
    height: 100%; 
    width: 100%; 
} 
#wrapper li { 
    width: 120px; 
    height: 50px; 
    padding-top: 15px; 
    height: 100%; 
} 
.row .col-xs-4 { 
    height: 200px; 
    width: 33%; 
} 
#col1 { 
} 
#col2{ 
    border-left: dotted 2px grey; 
} 
#col3 { 
    border-left: dotted 2px grey; 
}

HTML：

<div id="wrapper"> 
    <div class="row"> 
     <div id="col1" class="col-xs-4"> 
      <ul> 
       <li> 
        <a href="#">col-1</a> 
       </li> 

      </ul> 
     </div> 

     <div id="col2" class="col-xs-4"> 
      <ul> 
       <li> 
        <a href="#">col-2</a> 
       </li> 
      </ul> 
     </div> 

     <div id="col3" class="col-xs-4"> 
      <ul> 
       <li>row 1</li> 
       <li>row 2</li> 
       <li>row 3</li> 
       <li>row 4</li> 
      </ul> 
     </div> 
    </div> 
    </div>

http://jsfiddle.net/Mcq6u/26/

來源

2014-09-24 22:08:53 progammingaddict

你爲什麼要包裝你在UL和李內容？使用的行和列引導的specific classes（像你這樣做）（如果你想點你可以pseudoelement之前使用）

你可以只使用CSS：

.col-xs-4 { 
    border-left: dotted 2px grey; 
    height: 100%;} 
    .col-xs-4:first-child {border: none}

來源

2014-09-24 22:24:02 maioman

，你可以簡單地使用CSS display:table到div容器和display:table-cell到您的內容的div

見Fiddle Demo

來源

2014-09-25 07:33:33 Aru

如何在我的情況下爲我的李元素設置邊框

回答

相關問題