DIV

Question

请在此处查看我的codepen：http://codepen.io/Chiz/pen/XKBbok

1）如何摆脱红盒之间的小差距？我已经将填充和边距设置为0，但仍然存在差距。

2）在紫色框（.container）中，右侧的空间大于左侧的空间。我试图使用“margin：0 auto”将UL集中在.container中。但它没有效果。

韩国社交协会！

* {
  box-sizing: border-box;
}

.container
{
  border:1px solid blue;
  width:65%;
  margin:0 auto;
}

ul {
  list-style-type: none;
  border:1px solid purple;
  margin:0 auto;
}

ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: 0;
  padding: 0;
  position:relative;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:0;
  right:0;
}

<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>

Answer 1

关于您的第一个问题，您遇到了内联级元素之间的自然间距。将间隙视为段落中单词之间的空格。当您点击代码中单词之间的空格键时，浏览器会在屏幕上显示一个空格。

有多种方法可以消除这些差距。一种方法是删除代码中inline-block元素之间的空格：Revised Codepen

以下是其他解决方案的更详细解释：https://stackoverflow.com/a/32801275/3597276

关于间距问题，容器右侧较大的空白是由于包裹。更具体地说，容器不知道它的儿童何时包裹，因此它不会自动收缩包裹较窄的布局。

以下是更详细的解释和示例：

• https://stackoverflow.com/a/32811002/3597276
• https://stackoverflow.com/a/37413580/3597276

Answer 2

1）export function RouteMatchHandler(data){ return new Promise((resolve, reject) => { match(data, (error, redirectLocation, renderProps) => { if (error) { return resolve({ code: 500, payload: error }); } else if (redirectLocation) { let url = redirectLocation.pathname + redirectLocation.search; return resolve({ code: 301, payload: url }); } else if (renderProps) { let { query, params, components, history} = renderProps; let store = configureStore(); let rootTask = store.runSaga(rootSaga); let html = null; wrap(execFetchDataEntryPoint)(components, { query, params, store, history }) .then(() => { renderToString( <Provider store={store}> {<RouterContext {...renderProps} />} </Provider> ) return store.dispatch(END); }) .then(() => { return rootTask.done // never been resolved, pending continously!!! }) .then(() => { html = renderToString( <Provider store={store}> {<RouterContext {...renderProps} />} </Provider> ) return resolve({ code: 200, payload: {html, state: store.getState()} }); }) } else { return resolve({ code: 301, payload: 'NOT FOUND' }); } }) }); } //helpers function* execFetchDataEntryPoint(components, metadata){ if(!components || !components.length){ return; } let component = components[0].WrappedComponent ? components[0].WrappedComponent : components[0]; if(component.fetchData){ yield component.fetchData(metadata); } return yield getFetchDataEntryPoint(components.slice(1), metadata); } 元素以文本形式显示内联，因此元素之间的任何空格都会产生间隙。删除inline-block结束标记和开始标记之间的空格，即<li>

2）由于</li><li>元素是内嵌块，您需要将<li>更改为margin: 0 auto;

Answer 3

text-align: center;

在样式表中添加上述样式

Answer 4

将以下标记替换为ul和ul li：

ul {
 list-style-type: none;
 border:1px solid purple;
 margin:0 auto;
 width:100%;
 text-align:center;
 padding:0;
  }

 ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: -2px;
  padding: 0;
  position:relative;
 }

Answer 5

尝试以下代码，您可以通过添加li或float:left来减少margin-left元素之间的间距。默认情况下，ul有一些padding-left您需要设置0，或者您可以通过将left and right分配给padding来设置ul间距。< / p>

* {
  box-sizing: border-box;
}

.container
{
  border:1px solid blue;
  width:65%;
  height:60px;/*Added*/
  margin:0 auto;
}

ul {
  border:1px solid purple;
  margin:0;
  padding:0 48px;/*Added*/
}

ul li {
  display:inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  position:relative;
  list-style-type: none;
  margin:0px -3px;/*Added*/
  padding:10%;
}

ul li div
{
  border:1px solid green;
  position:absolute;
  transform:translateY(-50%);
  left:0;
  right:0;
}

<div class="container">
  <ul>
    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Home
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Plants
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Land
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />Animals
      </div>
    </li>

    <li>
      <div>
        <i class="fa fa-spinner"></i><br />About
      </div>
    </li>
  </ul>
</div>