小编tim*_*tes的帖子

我想在900px容器中均匀地拉伸6个导航项目,两者之间有一个均匀的空白区域.例如...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

目前,我能找到的最好的方法是:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

这个问题有两个问题.首先,它并不能真正证明它,而是将li标签均匀地分布在ul标签中..在"HOME"或"ABOUT"等较小的菜单项之间创建不均匀的空白区域,在"BASIC SERVICES"之类的较大菜单项之间创建不均匀的空白区域.

第二个问题是,如果导航项大于150px(即SPECIALTY SERVICES),布局会中断 - 即使整个导航的空间足够多.

有人能为我解决这个问题吗？我一直在网上搜索解决方案,而且它们似乎都很简短.仅在可能的情况下使用CSS/HTML ...

谢谢!

更新(2013年7月29日):使用table-cell是实现此布局的最佳现代方式.请参阅下面的felix的答案.该table cell属性目前在94%的浏览器上运行.你将不得不做一些关于IE7及以下的事情,但否则应该没问题.

更新(2013年7月30日):不幸的是,如果您将此布局与媒体查询相结合,则会出现影响此问题的webkit错误.现在你必须避免更改'display'属性. 请参阅Webkit Bug.

更新(2014年7月25日):现在有一个更好的解决方案,现在涉及text-align:justify.使用它更简单,您将避免Webkit错误.

我试图垂直和水平地居中覆盖图像幻灯片(flexslider)的一些内容.有一些类似的问题,但我找不到一个直接适用于我的具体问题的令人满意的解决方案.由于FlexSlider的限制,我不能position: absolute;在我的实现中使用img标记.

我几乎有下面的工作方法.唯一的问题是我无法inner-wrapper使用display: table-cell属性获取宽度和高度声明来处理div .

这是标准行为,还是我错过了我的代码？如果这是标准行为,那么我的问题的最佳解决方案是什么？

HTML

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

CSS

html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; …

我目前正在为客户工作一个网站(仍在进行中),并尝试修复网站上的一些移动问题.

我遇到的主要问题是移动浏览器(android + iphone)加载网站完全放大网站的左上角部分.无论视口的宽度如何,我都希望它缩小以适应视口中的整个网站宽度.

该网站可在此处查看:http: //www.graceprep.com

这有一个简单的解决方案吗？我对HTML/CSS很有经验,但在移动浏览器方面我有点新手.

这是我的header.php文件中的一些HTML可能是相关的.我尝试更改width属性无济于事.初始规模属性是有效的,但过于宽泛 - 我希望所有移动浏览器都能完全缩小网站,无论方向或屏幕大小.

有没有办法做到这一点？