0

私のペン: http://codepen.io/helloworld/pen/pCdBe

親 ul の高さを考慮して、ul タグ内の 3 つの li 要素をパーセント値で垂直方向に配置しました。

また、1 または 2 のような li 要素のテキストが垂直方向に配置されていて、ペンにまだバグがあることも望んでいます。

数値の左側にこのようなギャップがあるのはなぜですか?

 <ul id="navigationWheeler" >
    <li>1</li>
    <li style="background-color: #0094ff;">2</li>
    <li>3</li>
  </ul> 

#navigationWheeler {
    height: 300px;
    width:30px;
    text-align: center;   
    vertical-align: middle;
    border: black solid 1px;
    background-color: lightgray;
}

 li{
  list-style:none;
  height:33%;
  vertical-align: middle; 
}
4

4 に答える 4

-2

これまでに見たすべてのソリューションは部分的に機能します。

これは完全に機能するペンです。

  • ul-tag にパディング/マージンなし
  • li-tag は、親の高さに応じて % 増加します。

http://codepen.io/helloworld/pen/IfymB

<ul id="navigationWheeler" >
    <li>
      <div>1</div>
    </li>
    <li style="background-color: #0094ff;">
      <div>2</div>
    </li>
    <li>
      <div>3</div>
    </li>
  </ul> 

#navigationWheeler {
    height: 300px;
    width:30px;
    text-align: center;   
    vertical-align: middle;
    border: black solid 1px;
    background-color: lightgray;
  padding:0;
  margin:0;
}

 li{
  list-style:none;
  height:33%;
  vertical-align: middle; 
  display:table;
}

div{
  width:30px;
  display:table-cell;
  vertical-align: middle;
}
于 2013-08-02T08:30:02.507 に答える