'List items position absolute in single line

Hello I am trying to create menu with absolute position CSS rule for each list item. display: inline-block for parent doesn't work. Here's an example of markup.

.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


Solution 1:[1]

.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>

Solution 2:[2]

You can use position:absolute, too, but on a elements:

.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>

Solution 3:[3]

You can hardcode a "left: XXXpx" for each li but then you will have issues based on screen sizes. If you really want that for some reason though let me know and I will send an example of that.

Another option is to use a flex box (assuming you do not need this to work with older versions of IE) like below. The spacing between items will change, but it will be responsive to the size of the text and screen , versus just 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood
Solution 2 sinisake
Solution 3 Chris

Related Questions