目前我正在尝试为我的网站创建一个底座(类似于iOS底座),我的完整代码是
function addPrevClass(e) {
var target = e.target;
if (target.getAttribute('src')) { // check if it is img
var li = target.parentNode.parentNode;
var prevLi = li.previousElementSibling;
if (prevLi) {
prevLi.className = 'prev';
}
target.addEventListener('mouseout', function() {
prevLi.removeAttribute('class');
}, false);
}
}
if (window.addEventListener) {
document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
}
#dock li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, .5)));
/* reflection is supported by webkit only */
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock li:hover + li img,
#dock li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container ul {
text-align: center;
}
<div id="dock-container">
<div id="dock">
<ul>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
</ul>
<div class="base"></div>
</div>
</div>
但我的问题是我的码头不在网站的中心,当我试图采取浮动:左;关闭,我的码头变得垂直,我如何将码头居中并仍保持水平?任何想法?
答案 0 :(得分:0)
更改浮动:左侧显示:内联;或显示:li的内联块,具体取决于您的需求:
li {
display: inline-block;
}
答案 1 :(得分:0)
您可以使用display:table;财产和设定保证金:auto;如果我理解你的麻烦这样,ul可以缩小其内容并仍然表现为块元素。
function addPrevClass(e) {
var target = e.target;
if (target.getAttribute('src')) { // check if it is img
var li = target.parentNode.parentNode;
var prevLi = li.previousElementSibling;
if (prevLi) {
prevLi.className = 'prev';
}
target.addEventListener('mouseout', function() {
prevLi.removeAttribute('class');
}, false);
}
}
if (window.addEventListener) {
document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}
li {
float: left;
}
ul {
display: table;
margin: auto;
list-style-type: none;
/*margin: 0;*/
padding: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
}
#dock li img {
width: 64px;
height: 64px;
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, .5)));
/* reflection is supported by webkit only */
-webkit-transition: all 0.3s;
-webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
-webkit-transform: scale(2);
margin: 0 2em;
}
#dock li:hover + li img,
#dock li.prev img {
-webkit-transform: scale(1.5);
margin: 0 1.5em;
}
#dock-container ul {
text-align: center;
}
<div id="dock-container">
<div id="dock">
<ul>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://palm.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
<li>
<a href="http://android.com">
<img src="https://dl.dropboxusercontent.com/u/1330446/demo/dock/images/dock-icons/palm.png" />
</a>
</li>
</ul>
<div class="base"></div>
</div>
</div>
答案 2 :(得分:0)
如果您想保留float: left
以避免每个列表项之间的空间,您可以使用:
#dock {
text-align: center;
}
ul {
display: inline-block;
}
答案 3 :(得分:0)
css3可以救你。添加以下内容并尝试
#dock{
display: flex;
align-items: center;
justify-content: center;
}