0

问题描述

全屏浏览时,貌似没什么问题

图片描述

当我更改浏览器窗口大小时,页面样式就出现奇怪现象了

图片描述

请问为什么会出现这种情况,如何更好的处理呢?

相关代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/minireset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 快捷入口 START -->
    <div id="shortcut">
        <div class="w">
            <ul id="shortcut-left">
                <li id="user-city" class="shortcut-btn-wrap">
                    <div class="shortcut-btn dropdown">
                        <span>城市</span>
                    </div>
                    <!-- 下拉层 -->
                    <!-- <div class="dropdown-layer"></div> -->
                </li>
            </ul>
            <ul id="shortcut-right">
                <li id="user-login">
                    <div class="shortcut-btn">
                        <a href="#">你好,请登录</a>&nbsp;&nbsp;
                        <a href="#" class="jd-red">免费注册</a>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn">
                        <a href="#">我的订单</a>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn dropdown">
                        <a href="#">我的京东</a>
                    </div>
                    <!-- 下拉层 -->
                    <!-- <div class="dropdown-layer"></div> -->
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn">
                        <a href="#">京东会员</a>
                    </div>
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn dropdown">
                        <a href="#" class="jd-red">企业采购</a>
                    </div>
                    <!-- 下拉层 -->
                    <!-- <div class="dropdown-layer"></div> -->
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn dropdown">
                        <span>客服服务</span>
                    </div>
                    <!-- 下拉层 -->
                    <!-- <div class="dropdown-layer"></div> -->
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn dropdown">
                        <span>网站导航</span>
                    </div>
                    <!-- 下拉层 -->
                    <!-- <div class="dropdown-layer"></div> -->
                </li>
                <li class="spacer"></li>
                <li>
                    <div class="shortcut-btn dropdown">
                        <span>手机京东</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 快捷入口 END -->
    
</body>
</html>

./css/minireset.css

/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

/* html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

*:before, *:after {
  box-sizing: inherit;
} */

img,
embed,
object,
audio,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
  text-align: left;
}

/* 自定义 */
a {
  text-decoration: none;
}

./css/common.css

body {
    font-size: 12px;
}

/* 版心 */
.w {
    width: 1190px;
    margin: 0 auto;
}

.jd-red {
    color: #f10215 !important;
}

./css/index.css

/* 快捷入口 */
#shortcut {
    border-bottom: 1px solid #ddd;
    background-color: #e3e4e5;
}

#shortcut .w {
    height: 30px;
    color: #999;
}

#shortcut a {
    color: #999;
}

#shortcut a:hover {
    color: #e33333;
}

#shortcut-left {
    float: left;
}

#shortcut-right {
    float: right;
}

#shortcut li {
    float: left;
}

#shortcut li.spacer {
    width: 1px;
    height: 10px;
    margin: 10px 5px 0;
    background-color: #ccc;
}

#user-city {
    margin-left: 200px;
}

.shortcut-btn {
    line-height: 30px;
    padding-left: 7px;
    padding-right: 7px;
}

.dropdown {
    height: 28px;
    line-height: 28px;
    border: 1px solid #e3e4e5; 
}

.dropdown:hover {
    padding-bottom: 2px;
    border-color: #ccc; 
    border-bottom: none;
    background-color: #fff;
}
2019-05-07 提问
5 个回答
0

已采纳
  • 首先,问题出在你的宽度设置上,你并没有给#shortcut元素设置宽度,因此它默认就是父元素body宽度的100%,而你不给html,body设置宽度时,它们默认便是浏览器窗口的宽度
  • 看一下你的第二张图,问题出现的原因便是你的#shortcut元素(灰色区域)宽度(等于你此时浏览器窗口宽度),小于你的.w元素宽度(你手动设置的1190px)
  • 解决办法的话,如果你的这个宽度(1190px)不想改,就给#shortcut一个最小宽度吧
#shortcut{
    min-width : 1190px;
}
0

做成响应式网页

0

要百分百宽度才行

#shortcut .w {
    height: 30px;
    color: #999;
    width: 100%;
}

分割线 不管前边


从头来看,是因为实际菜单栏宽度大于视窗,导致给视窗加的背景色无法加到菜单栏,所以直接把背景色给菜单栏就好了。

#shortcut .w {
    height: 30px;
    color: #999;
    background-color: #e3e4e5;
}
0

因为.w元素你设置了宽度1190px,但是它的父元素#shortcut宽度默认是页面的100%,解决方法就是:

#shortcut {
    border-bottom: 1px solid #ddd;
    background-color: #e3e4e5;
    width: 1190px;
}
0

设置最小宽度,minwidth

撰写答案

推广链接