Fatal编程技术网
  • css/
  • 我的CSS布局没有按应有的方式工作

我的CSS布局没有按应有的方式工作

css layout

我的CSS布局没有按应有的方式工作,css,layout,Css,Layout,好的，我有我的网页（），但它没有按我希望的方式工作 <body class="home"> <div id="wrapper"> <div id="logo"> <span>Project name</span> </div><!-- endLogo --> <div id="menu">

好的，我有我的网页（），但它没有按我希望的方式工作

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​
正如您在小型浏览器上看到的，由于线条高度的原因，徽标文本会向下跳跃。 如果可能的话，我希望项目名称是并排的，否则我希望它是彼此之间的，但我如何才能做到这一点

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​
Html: 

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​
如果您只想让“Project”和“Name”这两个词在一行上，那么这应该可以做到：

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​

#logo span { white-space: nowrap; }
文本可能会超出
#logo
的范围，这取决于您的大小（按百分比），因此，为了解决此问题，您还可以添加一个最小宽度，如下所示：

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​

#logo { min-width: 200px; }
编辑：我注意到您还将
页边距设置为
6%
。我建议使用像
20px
这样的常量值。还有，这里有一个我提到的建议。
对不起，我的粗鲁（不是我的本意），但这样的问题听起来像是“为我做吧。”（我看不到任何
code
和
？
问号。）最有可能被关闭。对不起，我不明白你所说的“并排”和“彼此之间”是什么意思。你能详细说明一下吗？我想把“项目名称”的标志并排展示。如果因为#徽标的宽度太小而“项目名称”的宽度大于#徽标的宽度而无法实现，那么请像这样显示“项目（换行）名称”好吧，所以我用您所说的更改了#徽标跨度和#徽标，但是当我把浏览器变小时，#menu div会出现在#logo div的下面。我不能让它在一行上？@Peacy这就是我建议使用固定边距而不是百分比的部分原因。如果使用浏览器的开发人员工具检查布局，您将看到
#菜单
上的边距将其推到下一行，因为它占用了太多的空间。我们不能将徽标和菜单放在一行中，因为没有足够的空间容纳它。通过设置较小的（甚至更好的，恒定的）边距，我们可以避免这个问题。@Peacy另一个选项是使用
position:relative
或
position:absolute
，这样它们就不再占用布局中相同的“空间”。但是，如果浏览器宽度过短，徽标和菜单可能会开始重叠。另一个选项是在
.home
上设置
最小宽度：1000px
，这将防止页面变得足够小，以至于菜单被推到第二行。好的，所以我将“项目名称”更改为“Stichting Kalpitiya”，并设置了#徽标最小宽度：270px；主宽度：960px；但是菜单又转到另一排了。我不会比960px更进一步，因为我必须使网页也适用于小屏幕。编辑：当浏览器的宽度为1040+@Peacy时，它会转到另一行。您是否尝试将
.home#menu
的
左边距更改为
20px
？这应该允许您设置一个较低的
最小宽度
。我通常不建议使用带有边距和填充的百分比。

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​