Display all list items in a single line with position set to absolute

Hey there, I'm currently working on creating a menu using the absolute position CSS rule for each list item. Unfortunately, setting display: inline-block for the parent doesn't seem to be doing the trick. Here's a snippet of the markup I'm using.

.menu-items{
}
.main-menu{
  position: relative;
  list-style:none;
}
.main-menu li {
  position: absolute;
  float:left;
}
.main-menu li a{
  font-size: 12px;
  color: rgba(1, 1, 1, 1);
}
.main-menu li a:hover{
  font-size: 21px;
  color: rgba(1, 1, 1, 1);
}
<div class="row">
  <div class="menu-items">
    <ul class="main-menu">
      <li><a href="index.html">index</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="projects.html">projects</a></li>
      <li><a href="contacts.html">contacts</a></li>
    </ul>
  </div> 
</div>

htmlcss

Answer №1

To maintain the layout, try using transform:scal(x);.

.menu-items {} .main-menu {
  list-style: none;
}
.main-menu li {
  display: inline-block;/*adjusted*/
  padding-left: 10px;/*relocated here*/
}
.main-menu li a {
  font-size: 12px;
  color: rgba(1, 1, 1, 1);
  display: inline-block;/*included*/
  background:white;/*included*/
  transition: 0.25s;/*included*/
}
.main-menu li a:hover {
  transform: scale(1.75);/*updated*/
}
<div class="row">
  <div class="menu-items">
    <ul class="main-menu">
      <li><a href="index.html">index</a>
      </li>
      <li><a href="shop.html">shop</a>
      </li>
      <li><a href="about.html">about</a>
      </li>
      <li><a href="projects.html">projects</a>
      </li>
      <li><a href="contacts.html">contacts</a>
      </li>
    </ul>
  </div>
</div>

Answer №2

.menu-items {}

.main-menu {
  position: relative;
  list-style: none;
}

.main-menu li {
  position: relative;
  float: left;
  width: 100px;
}

.main-menu li a {
  font-size: 12px;
  padding-left: 10px;
  color: rgba(1, 1, 1, 1);
}

.main-menu li a:hover {
  font-size: 21px;
  overflow: hidden;
  color: rgba(1, 1, 1, 1);
}
<div class="row">
  <div class="menu-items">
    <ul class="main-menu">
      <li><a href="index.html">index</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="projects.html">projects</a></li>
      <li><a href="contacts.html">contacts</a></li>
    </ul>
  </div>
</div>

Answer №3

To achieve the desired layout, consider using the position:absolute property on a tags:

.menu-items{
}
.main-menu{

  list-style:none;
}
.main-menu li {
position:relative;
display:inline-block;
  padding:30px;
  
}
.main-menu a {
font-size: 12px;
color: rgba(1, 1, 1, 1);
position:absolute;

width:100%;
height:100%;
left:0;
top:0;
}
.main-menu a:hover{
font-size: 21px;
color: rgba(1, 1, 1, 1);
}
<div class="row">
    <div class="menu-items">
    <ul class="main-menu">
      <li><a href="index.html">index</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="projects.html">projects</a></li>
      <li><a href="contacts.html">contacts</a></li>
    </ul>
</div> 
</div>

Answer №4

If you opt to hardcode a "left: XXXpx" for each li element, it may cause issues with different screen sizes. However, if this is something you really want, please inform me and I can provide an example of how to do it.

Another solution is to utilize a flex box (assuming compatibility with newer versions of IE) as shown below. This method will allow the spacing between items to adjust according to the text and screen size, instead of simply pushing everything to the right.

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.flex-item {
    padding: 5px;
    margin-top: 10px;
    color: white;
    text-align: center;
    font-size: 12px;
    color: rgba(1, 1, 1, 1);
}

.flex-item:hover {
    font-size: 21px;
}
<div class="row">
    <div class="menu-items">
    <ul class="flex-container">
      <li class="flex-item"><a href="index.html">index</a></li>
      <li class="flex-item"><a href="shop.html">shop</a></li>
      <li class="flex-item"><a href="about.html">about</a></li>
      <li class="flex-item"><a href="projects.html">projects</a></li>
      <li class="flex-item"><a href="contacts.html">contacts</a></li>
    </ul>
</div> 
</div>

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

What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible. Below is some code where I have styled the elements to demonstrate the issue. ...

javascriptjquerycss

Error with Django Application due to Static CSS Files

I'm currently facing an issue with adding a CSS file to my Django application. Even in the development environment, I am unable to run the local server using runserver. Every time I try to load the page that should utilize the CSS file, I encounter th ...

pythoncssdjango

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

What is the best method to achieve a width of 100% for an element (textarea) that has unspecified borders and padding, while also including the borders and padding

Native borders for input controls in various browsers often look more visually appealing compared to those set with CSS. However, the thickness of these native borders and padding can vary across different browsers, making it difficult to predict beforehan ...

css

Centering content vertically in CSS

I am facing an issue with aligning buttons vertically inside a div. The number of buttons may vary, but I want them to be aligned vertically in a single column. Using "vertical-align: middle" does not seem to work. How can I achieve this? The height of th ...

csshtmlvertical-alignment

Aligning a block heading in the middle of the page

I developed a basic flex-based table. section { display: flex; flex-direction: row; align-items: stretch; width: 100%; margin: 0; background-color: green; } h2, ul { width: 50%; padding-left: 1.5em; padding-right: 1.5em; } h2 { tex ...

htmlcssflexbox

What is the best method for effectively organizing and storing DOM elements alongside their related objects?

In order to efficiently handle key input events for multiple textareas on the page, I have decided to create a TextareaState object to cache information related to each textarea. This includes data such as whether changes have been made and the previous co ...

javascripthtml

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

There is a full background HTML5 video set to autoplay on my website. However, there seems to be an issue with some iOS mobile devices using Safari as the video fails to load properly at times. The error message displayed is: https://i.stack.imgur.com/D4X ...

htmlreactjsvideobackgroundhtml5-video

Updating the information on one HTML page using code from another HTML page

Imagine you have two HTML files, a.html and b.html. How can you change a specific div element in a.html using a button that is created in b.html? a.html <!DOCTYPE html> <html> <head> <title>Welcome to RemoteDemo</title> ...

javascriptjqueryhtml

Modify and maintain the selected DIV tag on the Master Page

My CSS class, selected, highlights the current step in a DIV on separate pages by moving the selected word to the next DIV. However, I am struggling to achieve the same effect in Master Page VB .Net where all steps are on one page. How can I highlight the ...

asp.netcssvb.netmaster-pages

Displaying an image using a URL with ngx-input-file in Angular 8

In my Angular 8 project, I have implemented the ngx-input-file component for easy file uploads, including images. While it works well for uploading new images, I am facing a challenge when it comes to displaying already uploaded images that users can chang ...

htmlangulartypescript

The Android platform does not support using spaces in hyperlinks

Struggling with a seemingly simple problem - I need to add a hyperlink in my application, for example: www.example of an address with spaces.html However, when I insert the URL into the code, it appears like this: Here is the snippet of my code: <Tex ...

androidhtmlxmlhyperlink

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...

javascripthtmlcsscanvaskonvajs

How can I position two bootstrap tables side by side based on their columns

Currently, I am utilizing bootstrap and Laravel form control to generate the table structures below. The one issue I am encountering is figuring out how to align the delete and edit buttons from two separate tables. Here is a snapshot of the current layout ...

csslaravelbootstrap-4

How can I prevent users from using the inspect element feature in Angular 4?

I have a collection of elements that I need to selectively display on a webpage. To achieve this, I am utilizing the following code snippet: [style.display]="!student.selected?'none':'block'" However, upon inspecting the element, a ...

htmlangularangular-ui

Printing values of an object in an Angular/HTML script is proving to be quite challenging for me

In my Angular project, I have created a service and component for listing objects. The list is functioning correctly as I have tested it with 'console.log()'. However, when I try to display the list on localhost:4200, nothing appears. <table&g ...

htmlangulartypescript

When accessing the defaultValue property of a select element, it will result in

Here is a typical HTML dropdown menu: <select name="email" id="email"> <option value="2" selected="selected">Before redirecting to PayPal</option> <option value="1">After payment is successful</option> <opti ...

javascriptjqueryhtml

How can I display an HTML document by uploading it and rendering it in VueJs?

I am looking for a way to display HTML documents on the front end of my Vue.js application. My goal is to retrieve the HTML content from my database and render it seamlessly on the user interface. Any suggestions or guidance would be greatly appreciated. ...

htmlvue.js

What is the best way to generate a CSS design with wavy patterns?

Check out the image below to see what I am attempting to create: https://i.sstatic.net/PlroF.png Here is my current code, but I need to make it more dynamic, similar to increasing the frequency rate of a sin or cosine wave. #wave { position: relativ ...

htmlcsscss-shapes

How to display a video with full height and width using CSS or JavaScript

I am trying to incorporate an html5 video (using the video tag) with 100% width and 100% height to play in the background. I have seen an example using an image, but I want to achieve the same effect with a video. Here is the code I have so far: #video { ...

javascriptcsshtml