Question

我遇到了搜索栏和搜索栏的问题。导航中的文本溢出了它的div容器。我尝试过使用各种各样的东西，比如分词和溢出隐藏，但似乎没有什么对我有用。如果你看到下面我有我的HTML代码和CSS。任何帮助表示赞赏！

我知道还有很多其他类似的问题，但我没有回答。

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
        <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
    <div id="wrapper">
        <div id="sidebar">
            <nav id="nav">
                <div id="searchbar">
                    <form action="http://www.example.com/search.php">
                        <input type="text" name="search" placeholder="Enter Book Title"/>
                    </form>
                </div>
                <ul>
                    <li>
                        <a id="firstlink">
                            Home
                        </a>
                    </li>
                    <li>
                        <a id="secondlink">
                            Categories
                        </a>
                    </li>
                    <li>
                        <a id="thirdlink">
                            Bestsellers
                        </a>
                    </li>
                    <li>
                        <a id="fourthlink">
                            Contact
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

CSS：

body{
    background-color: #f1f6f6;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    margin: 2em  1em 1em 1em;
    text-align: right;
    color: #888888;
    display: block;
}

#nav li{
    list-style-type: none;
}

#searchbar{
    padding-bottom: 0.5em;
    text-align: center;
}

#firstlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#secondlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#thirdlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

#fourthlink{
    display: block;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

问题示例 - http://i.imgur.com/TigP5MD.png＆amp; http://i.imgur.com/nj2A9ka.png

Answer 1

给<input>宽度：

#searchbar input { max-width: 100%; }

调查此类问题的方法是使用浏览器的DOM检查工具。在这种情况下，我能够看到（通过选择<div>和<form>容器）您的块级元素被限制在侧边栏区域内，但<input>本身不是。（在您链接的图像中，容器大小由蓝色突出显示框指示。）因此很明显，答案在于直接调整该元素的大小。

Here's a jsfiddle with that CSS change.

Answer 2

@Pointy是对的，但是在#sidebar上使用百分比宽度以及输入和链接上的文字时总是会遇到麻烦。在某一点上，它们总是大于#sidebar并重叠。

您可能希望查看http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 为了避免这种情况。

Div内的文字溢出另一个Div

2 个答案: