在單行中列出項目的絕對位置

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

您可以使用transform:scal(x);，它不會打擾佈局。

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

Answer 2

.menu-items{ 
 
} 
 
.main-menu{ 
 
\t position: relative; 
 
    list-style:none; 
 
} 
 
.main-menu li { 
 
\t position: relative;   
 
\t float:left; 
 
    width:100px; 
 
} 
 
.main-menu li a{ 
 
\t font-size: 12px; 
 
    padding-left:10px;   
 
\t color: rgba(1, 1, 1, 1); 
 
} 
 
.main-menu li a:hover{ 
 
\t font-size: 21px; 
 
    overflow:hidden; 
 
\t color: rgba(1, 1, 1, 1); 
 
}

<div class="row"> 
 
\t \t  <div class="menu-items"> 
 
\t \t  \t <ul class="main-menu"> 
 
\t \t \t  <li><a href="index.html">index</a></li> 
 
\t \t \t  <li><a href="shop.html">shop</a></li> 
 
\t \t \t  <li><a href="about.html">about</a></li> 
 
\t \t \t  <li><a href="projects.html">projects</a></li> 
 
\t \t \t  <li><a href="contacts.html">contacts</a></li> 
 
\t \t \t  </ul> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 3

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

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

 
width:100%; 
 
height:100%; 
 
left:0; 
 
top:0; 
 
} 
 
.main-menu a:hover{ 
 
\t font-size: 21px; 
 
\t color: rgba(1, 1, 1, 1); 
 
}

<div class="row"> 
 
\t \t  <div class="menu-items"> 
 
\t \t  \t <ul class="main-menu"> 
 
\t \t \t  <li><a href="index.html">index</a></li> 
 
\t \t \t  <li><a href="shop.html">shop</a></li> 
 
\t \t \t  <li><a href="about.html">about</a></li> 
 
\t \t \t  <li><a href="projects.html">projects</a></li> 
 
\t \t \t  <li><a href="contacts.html">contacts</a></li> 
 
\t \t \t  </ul> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 4

您可以硬編碼 「左：XXXpx」 爲每立但那麼你將有基於屏幕尺寸的問題。如果因爲某種原因真的想要這樣做，請告訴我，我會發送一個例子。

另一個選擇是使用一個彈性盒子（假設你不需要這個來使用老版本的IE），像下面這樣。項目之間的間距會發生變化，但它會響應文本和屏幕的大小，而不是將所有內容都推向右側。

.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; 
 
\t font-size: 12px; 
 
\t color: rgba(1, 1, 1, 1); 
 
} 
 

 
.flex-item:hover { 
 
\t font-size: 21px; 
 
}

<div class="row"> 
 
\t \t  <div class="menu-items"> 
 
\t \t  \t <ul class="flex-container"> 
 
\t \t \t  <li class="flex-item"><a href="index.html">index</a></li> 
 
\t \t \t  <li class="flex-item"><a href="shop.html">shop</a></li> 
 
\t \t \t  <li class="flex-item"><a href="about.html">about</a></li> 
 
\t \t \t  <li class="flex-item"><a href="projects.html">projects</a></li> 
 
\t \t \t  <li class="flex-item"><a href="contacts.html">contacts</a></li> 
 
\t \t \t  </ul> 
 
\t \t \t </div> 
 
\t \t </div>