垂直對齊列表元素

Question

請參閱示例代碼http://codepen.io/anon/pen/mJuaL

我正在呈現嵌套列表元素中的分層數據。我使用瀏覽器默認縮進列表，以便很容易看到層次結構。我喜歡保持這種方式（我可以使用CSS重置，並重新申請）。但我想讓右側的按鈕垂直對齊（意味着垂直看時在按鈕之間沒有移位）。簡單的CSS可能嗎？我使用bootstrap作爲我的框架。

代碼：（我用玉以避免重複）

oh_counties = [{name: "Franklin", zips:[111,222,333,444,555]},{name: "Adams", zips: [111,222,333,444]},{name: "Allen", zips: [111,222,333]}] 

wi_counties = [{name: "Dane", zips: [111]}, {name: "Adams", zips: [111,222,333,444]} ] 

states = [{name: "OH", counties: oh_counties},{name: "WI", counties: wi_counties},] 

mixin row(data) 
    .row 
    .col-lg-9 
     if data.name 
     | #{data.name} 
     else 
     | #{data} 
    .col-lg-3 
     button.btn.btn-default.btn-sm(type="button") 
     | test 

ul 
    for st in states 
    li 
     +row(st) 
     ul 
     for c in st.counties 
      li 
      +row(c) 
      ul 
       for z in c.zips 
       li 
        +row(z) 

Answer 1

我能調整你row()混入，實現你在找什麼。

mixin row(data) 
    .row 
    .col-lg-12 
     if data.name 
     | #{data.name} 
     else 
     | #{data} 
     .pull-right 
     button.btn.btn-default.btn-sm(type="button") 
      | test 

更新Codepen：http://codepen.io/anon/pen/jervf