What is the best way to maintain the layout design when resizing the font?

Here is the HTML and CSS code 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 {
  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 am looking to resize the font size of the items within the li elements, but I have noticed that when I do so, the right border also changes along with it.

Is there a way for me to keep the right border of the "Hi, Guest" element the same size as the others when adjusting the font size?

htmlcss

Answer №1

Eliminate display:block from #info as shown 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>

Answer №2

Apply a line-height of 20px to 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; // Include this line
}
.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>

Answer №3

It's always helpful to provide a fiddle when asking about issues like this.

If you're referring to the element expanding with the font size, that is the default behavior in html/css.

To prevent the text from causing its parent element to expand, you can either set a fixed height on the element or position the text absolutely.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you position the nav collapse toggle to the far right while still allowing it to collapse downwards on smaller devices with Bootstrap 5?

I am in need of a navigation section that is always visible on all devices, with a collapsible toggle aligned to the right. In Bootstrap 5.2, if I place the collapse toggle after the <div class="collapse navbar-collapse ..., the collapsible conten ...

htmlcssnavbarbootstrap-5markup

Guide to implementing a slider in HTML to adjust the size of my canvas brush

Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated! <canvas i ...

javascripthtmljquerycss

Instructions on passing a PHP variable as a parameter to a JavaScript function when a button is clicked

In my implementation of codeigniter 3, I have a view page where the data from $row->poll_question is fetched from the database. The different values within this variable are displayed on the voting.php page. Next to this display, there is a button label ...

javascriptphpjqueryhtmlcodeigniter

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss

What is the best way to ensure that the size of a header is balanced on both margins?

I just recently began learning CSS about a week and a half ago, and I'm facing a challenge that I'm struggling to overcome. I want my webpage to have the same design as shown in this image, but despite trying various solutions, I can't seem ...

htmlcssheaderblockmargin

Issue with Vue JS component on blade template page

Having trouble loading a Vue component into a Laravel blade file? Despite making changes, the content of my vue file isn't showing up in the blade file - even though there are no errors in the console. Any suggestions on how to resolve this issue woul ...

javascripthtmllaravelvue.js

Ajax function implemented successfully with stylish design

Hi there! :) I'm encountering an issue with my code. I am trying to create a dropdown filter using ajax, php, and json. The first dropdown menu (for selecting the build year of a car) is populated through php. The second dropdown menu allows users to ...

jquerycssajax

Using jQuery to emphasize search text in a user-friendly manner

After successfully implementing a search function for a table, I faced the challenge of highlighting the search keyword within a cell. Despite searching for a solution online, I couldn't find anything useful! Here is my HTML code: <table class="s ...

javascriptjqueryhtmlsearchcolors

Retrieve the HTML code from a webpage on a different domain

Looking to extract HTML from another domain. Attempted solution: $.get("http://website1.com", function(data) { alert("Data Loaded: " + data); }); (not working) For example, as the owner of two websites: website1.com website2.com Now, the goal is to ret ...

phpjavascriptjqueryhtmlajax

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

After spending a week working with Foundation 5 framework, I'm curious if there is a straightforward way to make my magellan sidebar shift to the bottom of the page when viewed on mobile or tablets. <div data-magellan-expedition="fixed"> <di ...

javascriptjqueryhtmlcsszurb-foundation

A step-by-step guide to showcasing dates in HTML with Angular

I have set up two datepickers in my HTML file using bootstrap and I am attempting to display a message that shows the period between the first selected date and the second selected date. The typescript class is as follows: export class Datepicker { ...

htmlangulartypescript

Disable the automatic scrolling feature of the daisyUI carousel when moving between slides

I recently implemented a carousel with indicator buttons from daisyUI in my Nextjs application. Unfortunately, I noticed that when clicking on an indicator button, not only does it switch slides but it also scrolls the page so that the top of the slide ali ...

cssnext.jstailwind-cssdaisyui

Listening for events on a canvas positioned beneath another element

I am currently dealing with an issue where I have a mouse move event listener set up on my canvas element. However, there is a div placed on top of the canvas with a higher z-index, which contains some menu buttons. The problem arises when I want the mous ...

javascripthtmlcanvas

Unable to access localStorage

I created a Plunker to store a value in localStorage: <!DOCTYPE html> <html> <script> localStorage.setItem('test', "hadddddha"); </script> </html> Then, I built a test page to retrieve the value from local ...

javascripthtmllocal-storagesession-storage

pictures showcased in a grid that dance and sway

Hey everyone, I wanted to ask about images on a website that have a unique effect when you hover over them. On the site follow your feet website, there is a grid section of destinations and when you move your mouse over a destination, it suddenly expands a ...

cssgridview

CSS Float issue on resizing: avoid element displacement due to margin or padding (responsive layout)

Having an issue that I need help with: My header includes a menu, news sliding with flexslider, and a search input: The problem occurs when I resize the browser manually or reload it with a smaller width; the right element jumps down, causing a pushdown ...

cssresizemedia-queriesfloating

Is it possible for a table row's cell to determine the value of the cell in the row above it?

Let me illustrate my issue with an example. Consider the following table: <table> <tr> <th>First</th><th>Second</th><th>Third</th> </tr> <tr> <td>A</td><t ...

javascriptjqueryhtml

Use jQuery and AJAX to update the current HTML content only when the image has finished loading

I am attempting to load a .php file that contains a 2Mb image into a specific div. While I can make this work with ajax, my issue is that I only want the content of the current div to be replaced with the new one once the image finishes loading. Currently ...

phpjqueryhtmlajaxloading

transition effect of appearing and disappearing div

Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly. Here is the JavaScript code: $('#fillBg').stop(true,false).fadeTo(3000, 0); $("#fillBg"). ...

javascriptjqueryhtmlcss

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

htmlcssasp.netcheckboxtoggle