相关疑难解决方法(0)

有没有办法做到这一点？当使用可以经常更改项目数量的导航时,不必计算with和更新css就好了,但只需要一个有效的解决方案.

如果这是不可能的(我假设是),任何人都可以指向一个可以做到这一点的JavaScript吗？

编辑

re:提供代码基本上我正在使用的代码,我认为是最典型的设置

<div class="main">
 <div class="nav">
  <ul>
   <li>short title</li>
   <li>Item 3 Long title</li>
   <li>Item 4 Long title</li>
   <li>Item 5 Long title</li>
   <li>Item 6 Extra Long title</li>
  </ul>
 </div>
</div>

Run Code Online (Sandbox Code Playgroud)

编辑

.main {
 width:100%;
 text-align:center;
}
.nav {
 margin:0 auto;
}
.nav ul li {
 display:inline;
 text-align:left;
}

我发现这个/这些解决方案的问题是内容被推到右边添加一些正确的填充(40px)似乎解决了我正在检查的浏览器(O FF IE)..nav {margin:0 auto; 填充右:40像素; 我不知道这个值来自哪里,为什么40px修复了这个问题.

有谁知道这是从哪里来的？它不是边距或填充,但无论我做什么,第一个约40px都不能用于放置.也许是添加这个的ul或li.

我已经看了一下display:table-cell这样做的方法,但是IE的复杂性仍然和其他解决方案有同样的问题

编辑(最后)

好吧,我已经尝试了一些关于缩进的事情.我已将所有填充重置为0

*{padding:0;}

修复了它,我不需要抵消填充(我想我会把整个过程都留下来,所以如果有人碰到这个,它会节省一些时间)

感谢您的评论和回复

假设我有一个可变宽度的图像(min:100px,max:100%[760px]).我还有一个<p>要在图像正下方显示的元素.我希望<p>最终的宽度与之相同<img>,但我似乎无法找到答案.

这是jsfiddle这样的场景中涉及的代码:

HTML:

<div id='page'>
    <figure>
        <img src='http://www.myimage.com/img.jpg'/>
        <p>Hi there. I am some text. I would like to start where the image starts :(</p>
    </figure>
</div>

css:

#page {
    width:760px; /* arbitrary */
}

figure img {
    display: block;
    border: 1px solid #333;
    max-width: 100%;
    min-width: 100px;
    margin: 0 auto;
}

figure p {
    /* ??? */
}

有任何想法吗？

所以..我有一个动态宽度页面.下面,包装器div将div内部居中.但是,每个div都有以下样式:

display:inline-block;
width:400px; /* static */

这使得内部div并排.但这意味着根据浏览器的宽度剩下一些空白,并且可以并排多少div而不会破坏下一行.

要了解我的目标,请打开Goog​​le Chrome新标签页并拖动浏览器窗口以缩小尺寸.你会看到,当你走得太远时,一些chrome应用程序碰到了下一行,但它仍然保持居中.

在我的情况下,他们碰到下一行,并没有居中.

这就是我的代码:

<div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>

我希望内部div是并排的,除非没有足够的空间,在这种情况下,结束一个将撞到下一行,所有同时保持在父div的中心.

谢谢你的帮助.