Question

我有这样的布局：

<container div>
    <header></header>
    <footer>
        <div>
            <nav>
                <ul>
                    <li></li>
                </ul>
            </nav>
        <div>
    </footer>
</container div>

页脚是一个居中的粘性页脚。我想添加社交媒体图标，但我不想指定特定的宽度。

如何在不丢失页脚div的情况下收缩页脚inline:block？如果我将div css添加到// use JS hoisting for variable declarations var // Timer to store the next timer function reference timer, // The delay between each function call delay = 5000, // Set the desired selector selectors = 'a[class="mn-person-info__link ember-view"][id^="ember"]', // Get the list of the required selectors. links = document.querySelectorAll(selectors); // Create a function which will be called every X seconds function openLink( index ){ // validate that the index is not out of bound if (index === links.length){ return; } // get the current link and open new window with the link url window.open(links[index].href,'_blank'); // Set the next timer to open the next window timer = setTimeout( openLink, delay, ++index); } // Call the function for the first time with index = 0 openLink( 0 );，则中心会丢失，并且会与浏览器窗口的左侧对齐。

Answer 1

如果您向内部inline-block添加div，则会失去居中，但如果您向页脚添加text-align: center，则可以解决此问题。

另一种解决方案是使用CSS3 transform。（你在标题中使用了一个）。当您在CSS transform中使用百分比时，百分比与元素本身相关，而不是与元素的容器相关。看下一个片段：

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  position: relative;
}

ul {
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  list-style: none;
}

footer#social {
  background: #F00;
  bottom: 0;
  left: 50%;
  padding: 0 10px;
  position: absolute;
  transform: translateX(-50%);
  width: auto;
}

<footer id="social">
  <div id="socmed">
    <nav id="social" class="socialIndex">
      <ul>
        <li><a href="mailto:info@site.nl">mail </a></li>
        <li><a href="https://www.linkedin.com/in/anonymous/">linkedin</a></li>
        <li><a href="tel:xx-xxx-xxx-xxx">telephone</a></li>
      </ul>
    </nav>
  </div>
</footer>

Answer 2

只需使用＆＃39; inline-block＆＃39;，就像这样：

footer > div {display: inline-block;}

如何收缩水平居中的div

2 个答案: