html - 停止文本换行

Question

在以下 jsfiddle 上：

http://jsfiddle.net/oshirowanen/4fgkj/

这是 HTML 的一个片段，因为如果我将整个内容都发布到这里，那将是太多的 HTML：

<div id="main">
    <div class="inner">
        <ul class="column">
            <li class="one">
                <ul>
                    <li><a href="#" class="link">SIDE MENU</a></li>
                    <li><a href="#" class="link">SIDE MENU</a></li>
                    <li><a href="#" class="link">SIDE MENU</a></li>
                </ul>
            </li>
            <li class="two">
                <ul>
                    <li class="main_content">

                        <p>content goes here</p>

                    </li>
                </ul>
            </li>
        </ul>

        <div class="clearfix"></div>
    </div>
</div>

你会看到我有一个菜单和一些内容。问题是我不希望内容环绕菜单。

我该如何阻止这种情况发生？

Answer 1

您需要做的就是将其添加到您的样式中：

.main_content {overflow: hidden;}

但是，我必须说，使用这样的ulfor 页面布局并不是一个好主意。从语义上讲，您的页面内容不是无序列表。

Answer 2

首先，不要li用于内容，它只用于显示列表（如菜单）。第二 - 回答你的问题 - 这样的结构可能会做你想要的，并且经常使用：

HTML：

<div class="wrapper">
    <div class="header">
             header
    </div> 
    <div class="wrapright">       
        <div class="right">
            right
        </div>
    </div>    
        <div class="left">
            left
        </div> 
        <div class="footer">
            footer
        </div>     
</div>

CSS：

.wrapper{
   width: 90%;
   margin: 0 auto;
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.wrapright{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
.right{
   margin-left: 220px;
   background-color: #afeeee;
   height: 200px;
}
.left{
   float: left;
   width: 200px;
   margin-left: -100%;
   background-color: #98fb98;
   height: 200px;
}
.footer{
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}
body {
   padding: 0px;
   margin: 0px;
}

---

现场演示

---

当然，您必须调整 CSS 以更改背景颜色、填充...以及调整 HTML 以调整内容。但我想你可以弄清楚这一点。

Answer 3

好吧，不要告诉它环绕......在：

#main .column .one {
    padding:10px 10px 10px 0px;
    float:left;
}

只需删除该行

float:left;

Answer 4

您必须设置min-height您的 css 规则 ( #main .column .one)。如果你设置它，你的内容将是正确的菜单，但不会被环绕。

#main .column .one {
    padding:10px 10px 10px 0px;
    float:left;
    min-height:600px;
}