CODEWITHSUNDEEP
htmlcsslistflexboxhtml-lists
user11211072
user11211072

Reputation:

CSS <li> does not extend

I have <ul> list and inside <li> i have link <a href="...">

I want the <li> not to be influenced by the content and have fixed size.

My CSS

 ul.files {
    display: inline-block;
    padding: 0;
    margin: 0 auto;    
}

ul.files li {
    display: inline;

}


ul.files li a { 

    color: black;
    float: left;
    padding: 8px 15px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 3px;
    background-color: #ffffff;
}

My HTML

<ul class="files">
  <li>
    <a id="some_id" href="http">123</a>
  </li>
</ul>

Upvotes: 1

Views: 44

Answers (1)

joka00
joka00

Reputation: 2537

To be able to set fixed width and height to <li> you need to change display: inline; to inline-block

ul.files li {
    display: inline-block;
    width: 150px;
    height: 150px;
}

To center text

To center content of li you can use display: inline-flex

ul.files li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
}

Upvotes: 1

Related Questions