[英]How do you stop the content of a <div> from starting a new line when resized?
I've got a problem with a little project. 我有一个小项目有问题。 I have a navigation bar that is a div and I have links inside it, however whenever I resize the page the last two start a new line.
我有一个导航栏,它是一个div,并且里面有链接,但是,每当我调整页面大小时,最后两个都会开始一个新行。 I would like the links to stay in a horizontal position and have a scrollbar added to the page.
我希望链接保持水平,并在页面上添加滚动条。 For example, when you are on google and you resize the browser the overflowed content does not start a new line., a scrollbar is added.
例如,当您在Google上并且调整浏览器的大小时,溢出的内容不会开始新的一行。而是添加了滚动条。 I have tried using a parent div and setting a minimum width, but neither have worked.
我试过使用父div并设置最小宽度,但是都没有用。
The CSS: CSS:
.topBar {
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
width:100%;
text-align:center;
height:40px;
}
.text2 {
font-size:35;
text-decoration:none;
margin-left:4%;
margin-right:4%;
}
.parent {
min-width:100%;
}
And the HTML: 和HTML:
<div class="parent">
<div class="topBar">
<a class="text2" href="placeholder.html">Media Mash</a>
<a class="text2" href="placeholder.html">Film</a>
<a class="text2" href="placeholder.html">Music</a>
<a class="text2" href="placeholder.html">Games</a>
<a class="text2" href="placeholder.html">Books</a>
</div>
</div>
Pages will automatically scroll horizontally when the content is too wide. 当内容太宽时,页面将自动水平滚动。 If you want lots of elements in a block to stay too wide then you either need to make their parent too wide (which isn't applicable in this case) or stop the parent wrapping in-line elements (which is applicable).
如果您希望块中的许多元素保持太宽,则需要使它们的父元素太宽(在这种情况下不适用),或者停止父包装内联元素(这是适用的)。 To stop the parent wrapping the
<a>
tags, add white-space: nowrap
to the .topbar
rules. 要停止父包装
<a>
标记,请在.topbar
规则中添加white-space: nowrap
。
If you want the background of .topbar
to always fill out behind the contents as well then you'll also need to change your width
property to min-width
. 如果您希望
.topbar
的背景也总是在内容的后面填充,则还需要将width
属性更改为min-width
。
Here's an example of it in action without the min-width
fix (it overflows at about 800px wide for me). 这是一个没有
min-width
修正的示例 (对我来说, min-width
大约为800px溢出)。
As mentioned in the comments, to make sure that margins don't overflow outside the parent when the content is wider than the page, add padding: 0.1px
to the .topbar
rules. 如评论中所述,为确保在内容比页面宽时页边距不会在父级之外溢出,请在
.topbar
规则中添加padding: 0.1px
。 This forces the child margin to stay inside the parent margin (rather than overlapping it) without affecting presentation by much. 这迫使子级边距保留在父级边距之内(而不是重叠),而不会过多影响展示。
You can use the overflow property. 您可以使用溢出属性。 http://www.w3schools.com/cssref/pr_pos_overflow.asp
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I hope it helps. 希望对您有所帮助。
Then you would have to give your div a fixed width. 然后,您将不得不给div一个固定的宽度。
Instead of width: 100%;
代替
width: 100%;
replace it with how many pixels your menu is, for example: width: 700px;
用菜单的像素数替换它,例如:
width: 700px;
.topBar {
background-color:rgb(161,35,35);
position:relative;
display:inline-block;
width: 700px;
text-align:center;
height:40px;
}
What you need is to set accordingly white-space
property in your parent
class. 您需要在
parent
类中设置相应white-space
属性。
.parent {
min-width: 100%;
white-space: nowrap;
}
You can see a working example . 您可以看到一个有效的示例 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.