帶無序列表的浮動按鈕

Question

我有3個部分的問題。

1. 如何將無序列表（Google和Facebook圖標）從右到左與其父列表項目對齊時進行對齊。 （目前當父母列表項目懸停時，Google和Facebook圖標總是與第一個列表項目對齊）

2. 如何將Facebook和Google圖標居中。

3. 當鼠標移動到Facebook或Google圖標時，原始無序列表消失。我怎樣才能解決這個問題。下面

代碼段：

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.label-container { 
 
    position: fixed; 
 
    bottom: 48px; 
 
    right: 105px; 
 
    display: table; 
 
    visibility: hidden; 
 
} 
 

 
.label-text { 
 
    color: #FFF; 
 
    background: rgba(51, 51, 51, 0.5); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
    border-radius: 3px; 
 
} 
 

 
.label-arrow { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: #333; 
 
    opacity: 0.5; 
 
} 
 

 
.float { 
 
    position: fixed; 
 
    width: 60px; 
 
    height: 60px; 
 
    bottom: 40px; 
 
    right: 40px; 
 
    background-color: #F33; 
 
    color: #FFF; 
 
    border-radius: 50px; 
 
    text-align: center; 
 
    box-shadow: 2px 2px 3px #999; 
 
    z-index: 1000; 
 
    animation: bot-to-top 2s ease-out; 
 
} 
 

 
.ul { 
 
    position: fixed; 
 
    right: 40px; 
 
    padding-bottom: 20px; 
 
    bottom: 80px; 
 
    z-index: 100; 
 
} 
 

 
.ul1 { 
 
    position: fixed; 
 
    right: 80px; 
 
    padding-bottom: 20px; 
 
    bottom: 80px; 
 
    z-index: 100; 
 
} 
 

 
.ul .li { 
 
    list-style: none; 
 
    margin-bottom: 10px; 
 
} 
 

 
.ul1 .li1 { 
 
    list-style: none; 
 
    margin-bottom: 20px; 
 
    display: inline-block; 
 
} 
 

 
.ul .li a img { 
 
    color: #FFF; 
 
    border-radius: 50px; 
 
    text-align: center; 
 
    box-shadow: 2px 2px 3px #999; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: block; 
 
} 
 

 
.ul1 .li1 a { 
 
    background-color: #F33; 
 
    color: #FFF; 
 
    border-radius: 50px; 
 
    text-align: center; 
 
    box-shadow: 2px 2px 3px #999; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: block; 
 
    
 
} 
 

 
.ul:hover, .ul1:hover { 
 
    visibility: visible!important; 
 
    opacity: 1!important; 
 
} 
 

 
    
 

 
.my-float { 
 
    font-size: 24px; 
 
    margin-top: 18px; 
 
} 
 

 
a.menu-share+.ul, a.menu-share1+.ul1 { 
 
    visibility: hidden; 
 
} 
 

 

 
a.menu-share:hover+.ul, a.menu-share1:hover+.ul1 { 
 
    visibility: visible; 
 
    animation: scale-in 0.5s; 
 
} 
 

 
a.menu-share i { 
 
    animation: rotate-in 0.5s; 
 
} 
 

 
a.menu-share:hover>i { 
 
    animation: rotate-out 0.5s; 
 
} 
 

 
@keyframes bot-to-top { 
 
    0% { 
 
    bottom: -40px 
 
    } 
 
    50% { 
 
    bottom: 40px 
 
    } 
 
} 
 

 
@keyframes scale-in { 
 
    from { 
 
    transform: scale(0); 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes rotate-in { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes rotate-out { 
 
    from { 
 
    transform: rotate(360deg); 
 
    } 
 
    to { 
 
    transform: rotate(0deg); 
 
    } 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<a href="#" class="float menu-share"> 
 
    <i class="fa fa-envelope-o my-float"></i> 
 
</a> 
 
<ul class="ul"> 
 
    <li class="li"> 
 
    <a href="#" class="menu-share1"> 
 
     <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" class="my-float" /> 
 
    </a> 
 

 
    <ul class="ul1"> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-google-plus my-float"></i> 
 
     </a> 
 
     </li> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-facebook my-float"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="li"> 
 
    <a href="#" class="menu-share1"> 
 
     <img src="http://mblogthumb1.phinf.naver.net/20121009_136/dogtalk__1349752474508pRuyE_JPEG/Puppy-Love-29817_large.jpg?type=w2" class="my-float" /> 
 
    </a> 
 
    <ul class="ul1"> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-google-plus my-float"></i> 
 
     </a> 
 
     </li> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-facebook my-float"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

嘗試的那一個。我重寫了一下代碼。關於居中文本元素的主要想法是指定line-height等於元素的高度，但不應該有任何填充。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.label-container { 
 
    position: fixed; 
 
    bottom: 48px; 
 
    right: 105px; 
 
    display: table; 
 
    visibility: hidden; 
 
} 
 

 
.label-text { 
 
    color: #FFF; 
 
    background: rgba(51, 51, 51, 0.5); 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
    border-radius: 3px; 
 
} 
 

 
.label-arrow { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    color: #333; 
 
    opacity: 0.5; 
 
} 
 

 
.float { 
 
    position: fixed; 
 
    width: 60px; 
 
    height: 60px; 
 
    bottom: 40px; 
 
    right: 40px; 
 
    background-color: #F33; 
 
    color: #FFF; 
 
    border-radius: 50px; 
 
    text-align: center; 
 
    line-height: 60px; 
 
    box-shadow: 2px 2px 3px #999; 
 
    z-index: 1000; 
 
    animation: bot-to-top 2s ease-out; 
 
} 
 

 
.ul { 
 
    position: fixed; 
 
    right: 40px; 
 
    padding-bottom: 20px; 
 
    bottom: 80px; 
 
    z-index: 100; 
 
} 
 

 
.ul1, .ul2 { 
 
    position: fixed; 
 
    right: 60px; 
 
    padding-bottom: 20px; 
 
    z-index: 100; 
 
    padding-right: 20px; 
 
} 
 

 
.ul1 { 
 
    bottom: 80px; 
 
} 
 

 
.ul2 { 
 
    bottom: 120px; 
 
} 
 

 
.ul .li { 
 
    list-style: none; 
 
    margin-bottom: 10px; 
 
} 
 

 
.ul1 .li1 { 
 
    list-style: none; 
 
    line-height: 30px; 
 
    display: inline-block; 
 
    margin-bottom: 10px; 
 
} 
 

 
.ul .li a img { 
 
    color: #FFF; 
 
    border-radius: 50px; 
 
    text-align: center; 
 
    box-shadow: 2px 2px 3px #999; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: block; 
 
} 
 

 
.ul1 .li1 a { 
 
    background-color: #F33; 
 
    color: #FFF; 
 
    border-radius: 50px; 
 
    text-align: center; 
 
    box-shadow: 2px 2px 3px #999; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: block; 
 
} 
 

 
.ul:hover, .ul1:hover { 
 
    visibility: visible!important; 
 
    opacity: 1!important; 
 
} 
 

 
a.menu-share+.ul, a.menu-share1+.ul1 { 
 
    visibility: hidden; 
 
} 
 

 

 
a.menu-share:hover+.ul, a.menu-share1:hover+.ul1 { 
 
    visibility: visible; 
 
    animation: scale-in 0.5s; 
 
} 
 

 
a.menu-share i { 
 
    animation: rotate-in 0.5s; 
 
} 
 

 
a.menu-share:hover>i { 
 
    animation: rotate-out 0.5s; 
 
} 
 

 
@keyframes bot-to-top { 
 
    0% { 
 
    bottom: -40px 
 
    } 
 
    50% { 
 
    bottom: 40px 
 
    } 
 
} 
 

 
@keyframes scale-in { 
 
    from { 
 
    transform: scale(0); 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes rotate-in { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes rotate-out { 
 
    from { 
 
    transform: rotate(360deg); 
 
    } 
 
    to { 
 
    transform: rotate(0deg); 
 
    } 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<a href="#" class="float menu-share"> 
 
    <i class="fa fa-envelope-o my-float"></i> 
 
</a> 
 
<ul class="ul"> 
 
    <li class="li"> 
 
    <a href="#" class="menu-share1"> 
 
     <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" class="my-float" /> 
 
    </a> 
 

 
    <ul class="ul1 ul2"> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-google-plus my-float"></i> 
 
     </a> 
 
     </li> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-facebook my-float"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="li"> 
 
    <a href="#" class="menu-share1"> 
 
     <img src="http://mblogthumb1.phinf.naver.net/20121009_136/dogtalk__1349752474508pRuyE_JPEG/Puppy-Love-29817_large.jpg?type=w2" class="my-float" /> 
 
    </a> 
 
    <ul class="ul1"> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-google-plus my-float"></i> 
 
     </a> 
 
     </li> 
 
     <li class="li1"> 
 
     <a href="#"> 
 
      <i class="fa fa-facebook my-float"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>