0

这是相关的HTML：

    <div class="row">
        <div class="arrow box">&#9668;</div>Month Year<div class="dayMonth box"></div>&#9658;<div class="arrow box"></div>
    </div>

这是上述 HTML 所在的 .html 文件链接到的 css：

*
{
    margin: 0; 
    padding: 0; 
} 

body
{
    font-family: "Times New Roman"; 
    font-size: 12pt; 

} 

.dayMonth
{
    width: 80%; 
}

.arrow
{ 
    width: 10%; 
}

.row
{
    width: 58em; 
    background-color: gray; 
    margin-right: auto; 
    margin-left: auto; 
}

.box
{
    float: left; 
    text-align: center; 
}

这是输出：

见说明

“行”在浏览器右侧居中，但里面的东西（两个箭头和月份）没有做我想要的。

我认为这应该做的是，因为有两个箭头，它们的宽度都被发送到 10%，然后 dayMonth 宽度是 80%，所有 div 都应该占据整个“行”（因为它们总和为 100 %) 并且文本 "Month Year" 应该在 "row" 中居中，因为 .dayMonth css 类说它应该在其 div 中居中并且因为它的 div 应该是 "row" 的中心 80%。显然，这并没有发生。

我不想要一个不同的解决方案（本身）我想知道为什么我写的代码没有表达我想要表达的想法，没有按照我想要的方式工作。

我想我一定是误解了 %'s 如何控制宽度。http://www.w3schools.com/css/pr_dim_width.asp说 % 的“以包含块的百分比定义宽度”，看起来 % 应该做我打算让他们做的事情，所以我米彻底糊涂了。

我哪里出错了？

4

4 回答 4

2

这在 Opera 中对我来说很好用。

我确实注意到您在<div>. 试着把它放进去，看看能不能解决它。

编辑
再次使用最后一个箭头，它也在其<div>标签之外。

你的 HTML 应该是这样的： 

<div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

此外，一旦执行此操作，该行将<div>没有高度，因此您可能需要明确设置高度（尝试 20px）。

于 2010-11-15T16:43:40.520 回答
1

一旦我修复了您的 HTML，它就可以在 FF 中正常工作。您有空的 div，而 Month Year 和左箭头不在各自的 div 中。

当我使用萤火虫时，我很快就发现了这一点。您应该使用 firebug 或 chrome 的开发者工具进行调试。

于 2010-11-15T16:49:01.473 回答
1 
<div class="row">
    <div class="arrow box">&#9668;</div><div class="dayMonth box">Month Year</div><div class="arrow box">&#9658;</div>
</div>

试试这样的代码，内容在 div 中。在 FF、IE7/8 和 Chrome 中为我工作。您可能希望对.row颜色使用十六进制值，例如 #333333 - 除了 IE7 之外，我没有在任何浏览器中为我呈现颜色。

于 2010-11-15T16:52:27.107 回答
1

首先，您的标记是错误的，这就是您看到问题的原因。它与不在 div 中的内容有关，而是在它们之外，从而导致浮动元素的高度问题。

这是更正的工作：

http://jsbin.com/ezari4/edit

于 2010-11-15T16:55:37.327 回答