Question

我试图在div内部保留一些文本而我不想保留整个页面，我希望保证金从div开始。这是因为我已经使该网站适合于拥有至少800 x 600分辨率屏幕的人，如果我将对整个页面进行保证，那么对于其他分辨率的人而言，该网站看起来会有所不同1920 x 1080（我的分辨率）。

CSS

body
{
    background-color: #fff;
    margin: 0;
}

p
{
    display:inline;
}

.logo
{
    position:absolute;
    background-image:url(images/Logo.png);
    background-position:center;
    background-repeat: no-repeat;
    height: 60px;
    width: 100%;
}

.logobg
{
    background-color: #0e1216;
    width: 100%;
    height: 60px;
    min-width: 800px;
}

.navBarBtn
{
    float:left;
    margin-left: 10px;
    margin-top: 15px;
    width: 100 %;
    height: 25px;
}

HTML

<body>
<!--Logo & Navigation Bar-->
<div class="logobg">
<div class="logo">

<p id="text1" class="navBarBtn1"> Hem </p>
<p id="text1" class="navBarBtn2"> Om Oss </p>
<p id="text1" class="navBarBtn3"> Referenser </p>
<p id="text1" class="navBarBtn4"> Partners </p>
<p id="text1" class="navBarBtn5"> Kontakt </p>

</div>
</div>

这是网站，所以你可以自己看一下。 Website URL

Answer 1

您是正确的，您可以使用较少的类导航按钮。使用Float：只要屏幕或包含框宽到足以适合，css类中的左侧将水平排列，否则它将在下面开始第二行。您提到您希望该网站针对屏幕宽度至少为800px的用户进行了优化。因此我还建议您添加最小宽度：800px以及宽度：容器类（logobg）中的100％。如果你只是将宽度保持在100％，那么使用较小屏幕的人会缩小菜单并重新调整一下，你的按钮不会保持水平。您可以看到以下代码：

<强> HTML

<p id="text1" class="navBarBtn"> Hem </p>
<p id="text1" class="navBarBtn"> Om Oss </p>
<p id="text1" class="navBarBtn"> Referenser </p>
<p id="text1" class="navBarBtn"> Partners </p>
<p id="text1" class="navBarBtn"> Kontakt </p>

<强> CSS

.logobg
{
background-color: #0e1216;
width: 100%;
min-width: 800px;
height: 60px;
}

.navBarBtn
{
float:left;
margin-left: 10px;
margin-top: 15px;
width: 100 %;
height: 25px;
}

Answer 2

使用容器（div）的padding css属性。填充是元素的内部空间和边界，而边距是元素边界之外的空间。

查看包装盒型号。

Answer 3

我不确定这是你正在寻找的东西，但如果是，你可以漂浮每一个＆＃34; p＆＃34;元素，然后在它们之间添加边距，而不是将它们定位为绝对值。

HTML：

<p id="text1" class="navBarBtn"> Hem </p>
<p id="text1" class="navBarBtn"> Om Oss </p>
<p id="text1" class="navBarBtn"> Referenser </p>
<p id="text1" class="navBarBtn"> Partners </p>
<p id="text1" class="navBarBtn"> Kontakt </p>

CSS：

.navBarBtn
{
    float:left;
    margin-left: 10px;
    margin-top: 15px;
    width: 100 %;
    height: 25px;
}

实施例 http://jsfiddle.net/xakaxsqg/3/

DIV中的边距

3 个答案: