列出项目位置绝对单行

Question

您好我正在尝试为每个列表项创建具有绝对位置CSS规则的菜单。父级的display: inline-block不起作用。这是标记的一个例子。

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

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

Answer 2

您可以使用transform:scal(x);，它不会打扰布局。

＆＃13;

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您也可以使用position:absolute，但a元素：

.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

你可以硬编码＆＃34;左：XXXpx＆＃34;对于每个li，但是你会遇到基于屏幕尺寸的问题。如果您出于某种原因真的想要这个但是请告诉我，我会发送一个例子。

另一种选择是使用弹性框（假设您不需要使用旧版本的IE），如下所示。项目之间的间距会发生变化，但它会响应文本和屏幕的大小，而不是只是向右推动所有内容。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;