Question

目前我正在尝试为我的网站创建一个底座（类似于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>

但我的问题是我的码头不在网站的中心，当我试图采取浮动：左;关闭，我的码头变得垂直，我如何将码头居中并仍保持水平？任何想法？

Answer 1

更改浮动：左侧显示：内联;或显示：li的内联块，具体取决于您的需求：

li {
  display: inline-block;
}

Answer 2

您可以使用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>

Answer 3

如果您想保留float: left以避免每个列表项之间的空间，您可以使用：

#dock {
    text-align: center;
}

ul {
    display: inline-block;
}

Answer 4

css3可以救你。添加以下内容并尝试

#dock{
  display: flex;
  align-items: center;
  justify-content: center;
}

是否可以将已经浮动的div居中：left;组？

4 个答案: