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

首先，内容不要使用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;
}

---

LIVE DEMO

---

当然，您必须调整 CSS 以更改背景颜色、填充……以及调整 HTML 以调整内容。但我认为你将能够解决这个问题。