CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to keep not change when resize the font size?

Here is my css and html code 

.navi ul li {
  float:left;
  list-style-type: none;
  border-right: 1px solid #c0c0c0;
  margin:0px 0 0 0;
}

.navi ul li:last-child {
  border:none;
}

.navi ul li a {
  display:block;
  margin:0 20px;
  text-decoration: none;
  color:black;
}

#info {
  display:block;
  margin:0px 20px 0px;
  text-decoration: none;
  font-size:80%;
  color:gray;
}
<div class="navi">
  <ul>
    <li><a href="#">MANUALS</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="">SPARE PART</a></li>
    <li><a href="">WHERE TO BUY</a></li>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">EDIT BOOK</a></li>
    <li><span id="info">Hi, Guest</span></li>
    <li><a href="#" id="login">LOG IN</a></li>
  </ul>
</div>

I need to resize the font of li item but I found out that the border will also change to the one I just resize the font.

What can I do to keep right border of "Hi, Guest" same size as others when I try to resize the font size?

Upvotes: 1

Views: 69

Answers (3)

m4n0
m4n0

Reputation: 32255

Set line-height: 20px for the list item

.navi ul li {
  float: left;
  list-style-type: none;
  border-right: 1px solid #c0c0c0;
  margin: 0px 0 0 0;
  line-height: 20px; // Add
}
.navi ul li:last-child {
  border: none;
}
.navi ul li a {
  display: block;
  margin: 0 20px;
  text-decoration: none;
  color: black;
}
#info {
  display: block;
  margin: 0px 20px 0px;
  text-decoration: none;
  font-size: 80%;
  color: gray;
}
<div class="navi">
  <ul>
    <li><a href="#">MANUALS</a>
    </li>
    <li><a href="#">NEWS</a>
    </li>
    <li><a href="">SPARE PART</a>
    </li>
    <li><a href="">WHERE TO BUY</a>
    </li>
    <li><a href="#">SUPPORT</a>
    </li>
    <li><a href="#">EDIT BOOK</a>
    </li>
    <li><span id="info">Hi, Guest</span>
    </li>
    <li><a href="#" id="login">LOG IN</a>
    </li>
  </ul>
</div>

Upvotes: 1

captainsac
captainsac

Reputation: 2490

remove display:block from #info as below

#info {     
  margin:0px 20px 0px;
  text-decoration: none;
  font-size:80%;
  color:gray;
}

Snippet

.navi ul li {
  float:left;
  list-style-type: none;
  border-right: 1px solid #c0c0c0;
  margin:0px 0 0 0;
}

.navi ul li:last-child {
  border:none;
}

.navi ul li a {
  display:block;
  margin:0 20px;
  text-decoration: none;
  color:black;
}

#info {
 
  margin:0px 20px 0px;
  text-decoration: none;
  font-size:80%;
  color:gray;
}
<div class="navi">
  <ul>
    <li><a href="#">MANUALS</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="">SPARE PART</a></li>
    <li><a href="">WHERE TO BUY</a></li>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">EDIT BOOK</a></li>
    <li><span id="info">Hi, Guest</span></li>
    <li><a href="#" id="login">LOG IN</a></li>
  </ul>
</div>

Upvotes: 2

Tomas
Tomas

Reputation: 2726

For things like this ALWAYS post a fiddle.

If you mean that the element expands with the font size, that is default behavior of html/css.

You can either set fixed height of an element or make the text position:absolute in order to not expand its parents size

Upvotes: 0

Related Questions