带无序列表的浮动按钮

如何将无序列表（Google和Facebook图标）从右到左与其父列表项目对齐时进行对齐。（目前当父母列表项目悬停时，Google和Facebook图标总是与第一个列表项目对齐）
如何将Facebook和Google图标居中。
当鼠标移动到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>

来源

2017-10-15 Bigg_aye

尝试的那一个。我重写了一下代码。关于居中文本元素的主要想法是指定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>

来源

2017-10-15 22:03:24 Sergey

带无序列表的浮动按钮

回答

相关问题