CODEWITHSUNDEEP
htmlcss
cappo
cappo

Reputation: 3

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>

Upvotes: 0

Views: 2411

Answers (4)

Kostas Bastas
Kostas Bastas

Reputation: 11

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

Upvotes: 1

Chris
Chris

Reputation: 129

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>

Upvotes: 0

sinisake
sinisake

Reputation: 11328

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>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

You can use transform:scal(x); , it won't disturb the layout.

.menu-items {} .main-menu {
  list-style: none;
}
.main-menu li {
  display: inline-block;/*modified*/
  padding-left: 10px;/* moved here*/
}
.main-menu li a {
  font-size: 12px;
  color: rgba(1, 1, 1, 1);
  display: inline-block;/*added*/
  background:white;/*added*/
  transition: 0.25s;/*added*/
}
.main-menu li a:hover {
  transform: scale(1.75);/*modified*/
}
<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>

Upvotes: 1

Related Questions