0

私のコード - プランカー

流動的なレイアウトを作成しようとしています。サイドバーはリンクのリストで構成されています。<li>各要素を完全な正方形にしたいのですが、テキストを内部に追加すると問題が始まります。私の正方形に高さを追加しているようで、得られるのは長方形です。私のコードを調べると、私のリストのサイズobjectsは 32px X 43px です。<li>内部テキストが要素を拡張するのを防ぐにはどうすればよいですか? <li>また、要素の左下にテキストを表示するにはどうすればよいですか?

私のCSS：

body{
   width: 100%;
   margin: 0 auto;
 }

 .content {
    width: 95%;
    display: inline;
    float: left;
  }  

  .sidebar{
      width: 5%;
      display: inline;
      float: left;
   }

 .sidebar ul{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

  }

 .sidebar li{
    padding: 50%;
    background-color: oldlace;
  }

  .sidebar a{
    display: block;
    font-size: 0.5em;
  }

私のHTML：

 <body >
<h1>Hello Plunker!</h1>

<div class="sidebar">
  <ul>
        <li><a href="#">ANALYTICS</a></li>
        <li><a href="#">STYLES</a></li>
        <li><a href="#">VOTERS</a></li>
        <li><a href="#">GET STARTED</a></li>
        <li><a href="#">UPDATE</a></li>
  </ul>
</div>
<div class="content">
  <p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>

4

1 に答える 1