Html CSS最小宽度不正常_Html_Css

Html CSS最小宽度不正常

html css

Html CSS最小宽度不正常,html,css,Html,Css,在下面的代码中，我将我的top徽标设置为min width:800px，这样用户就不能调整大小并扰乱我的导航。然而，出于某种原因，它不起作用。有人能告诉我我做错了什么吗 <!DOCTYPE html> <html> <head> <title>css example</title> <style type="text/css"> #logo { background-color: black; w

在下面的代码中，我将我的top徽标设置为min width:800px，这样用户就不能调整大小并扰乱我的导航。然而，出于某种原因，它不起作用。有人能告诉我我做错了什么吗

<!DOCTYPE html>
<html>
<head>
    <title>css example</title>

<style type="text/css">

#logo {
    background-color: black;
    width: 100%;
    color: rgb(255,200,0);
    height: 100px;
    min-width: 800px;
}

#logo p {
    display: inline;
    padding: 0;
}

#logo img {
    padding: 10px;
    padding-top: 15px;
    vertical-align: middle;
}

#logo h1 {
    display: inline;
    padding-right: 25px;
    vertical-align: middle;
    float: right;

}

#logo a {
    vertical-align: middle;
    float: right;
    color: rgb(255, 200, 0);
    text-decoration: none;
    font-size: 1.1em;
    margin:0;
    padding: 15px;
}

body {
    font-size: 100%;
    font-family: Arial, Helvetica, Verdana;
    margin: 0;
}

#contents {
    border: 1px solid black;
    width: 90%;
    min-height: 650px;
    height:auto !important;
    margin: 0 5%;
    margin-top: 15px;
    padding: 5px;
    border-radius: 5px;
}

#navMenu {
    width: 100%;
    height: 32px;
    background-color:rgb(255,200,0);
    border:1px #000 solid;
    font-weight:bold;
    margin-left: -2px;
}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:32px;
    border:1px #000 solid;
}

#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    background-color:rgb(255,200,0);
    float:left;
    border:1px #000 solid;
}

#navMenu ul li a{
    text-align:center;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#000;

}

#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top: 31px;
    margin-left: -2px;

}

#navMenu ul li:hover ul{
    visibility: visible;

}

#navMenu ul li:hover {
    background-color:rgb(255,200,0);
}

#navMenu a:hover {
    background-color:#000;
    color:rgb(255,200,0);
}


</style>

</head>

<body>

<div id="logo">

    <p>
        <img src="demo.gif" >
    </p>

    <h1>Comic Book Subscriber Management</h1>
    <!--
    <p><a href="#">LOG-IN </a></p>
    <p><a href="#">CONTACT US </a></p>-->

</div>

<div id="navMenu">
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PROFILE</a></li>
            <li><a href="#">MANAGE SUB</a>
            <ul>
                <li><a href="#">VIEW TITLES</a></li>
                <li><a href="#">ADD TITLE</a></li>
                <li><a href="#">MODIFY TITLE</a></li>
                <li><a href="#">REMOVE TITLE</a></li>
            </ul>
            </li>
            <li><a href="#">NEW RELEASES</a></li>
            <li><a href="#">E-MAIL</a></li>
        </ul>
    </nav>
</div>

<div id="contents">

    <p>This is just some dummy text. Dummy. </p>

</div>

</body>
</html>


css示例
#标志{
背景色：黑色；
宽度：100%；
颜色：rgb（255200,0）；
高度：100px；
最小宽度：800px；
}
#标志p{
显示：内联；
填充：0；
}
#标志img{
填充：10px；
填充顶部：15px；
垂直对齐：中间对齐；
}
#标志h1{
显示：内联；
右边填充：25px；
垂直对齐：中间对齐；
浮动：对；
}
#标志a{
垂直对齐：中间对齐；
浮动：对；
颜色：rgb（255，200，0）；
文字装饰：无；
字体大小：1.1米；
保证金：0；
填充：15px；
}
身体{
字体大小：100%；
字体系列：Arial、Helvetica、Verdana；
保证金：0；
}
#内容{
边框：1px纯黑；
宽度：90%；
最小高度：650px；
高度：自动！重要；
利润率：0.5%；
边缘顶部：15px；
填充物：5px；
边界半径：5px；
}
#导航菜单{
宽度：100%；
高度：32px；
背景色：rgb（255200,0）；
边框：1px#000实心；
字体大小：粗体；
左边距：-2px；
}
#导航菜单{
保证金：0；
填充：0；
线高：32px；
边框：1px#000实心；
}
#navMenu li{
保证金：0；
填充：0；
列表样式：无；
位置：相对位置；
背景色：rgb（255200,0）；
浮动：左；
边框：1px#000实心；
}
#Navul li a菜单{
文本对齐：居中；
文字装饰：无；
高度：30px；
宽度：150px；
显示：块；
颜色：#000；
}
#导航菜单{
位置：绝对位置；
可见性：隐藏；
顶部：31px；
左边距：-2px；
}
#导航菜单ul li：悬停ul{
能见度：可见；
}
#导航菜单：悬停{
背景色：rgb（255200,0）；
}
#导航菜单a：悬停{
背景色：#000；
颜色：rgb（255200,0）；
}


漫画书订户管理














这只是一些虚拟文本。笨蛋

您的

最小宽度

位于容器上

，但要执行您正在尝试的操作，您可能需要将其置于

img

本身上

另一个选项是将其设置为

div#logo

的背景图像，但我不确定这是否适合您的用例。

试试这个

**use like this it vii work in mozila nd chrome**    
for IE u need to use  css3-mediaqueries.js


@media screen and (min-width: 800px) 
    {
        #logo {
        background-color: black;
        width: 100%;
        color: rgb(255,200,0);
        height: 100px;
        width: 800px;

    }

#logo {
    background-color: black;
    width: 800px;
    color: rgb(255,200,0);
    height: 100px;
    margin-left:auto;
    margin-right:auto;
}

请使用@media Query，我想您的要求是@media Query中的fullfil

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

我的图像只有大约200像素宽。@media屏幕和（最小宽度：800px）{#logo{背景色：黑色；宽度：100%；颜色：rgb（255200,0）；高度：100px；宽度：200px；}或u-cantry@media屏幕和（最大宽度：800px）{#徽标{背景色：黑色；宽度：100%；颜色：rgb（255200,0）；高度：100px；宽度：800px；}这不起作用，因为我需要顶部徽标来延长浏览器窗口的长度。我只需要确保当用户缩小屏幕时，导航栏保持水平，并且不会调整大小。