老师请帮忙看一下我的怎么实现不了效果

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

* {

margin: 0;

padding: 0;

font-size: 20px;

}

body {

background: #ddf;

}

.header {

width: 100%;

height: 100px;

background: black;

top: 0;

}

.himg {

float: left;

line-height: 100px;

}

.txt1 {

float: right;

height: 100px;

}

.text1,

.text2 {

height: 100px;

line-height: 100px;

color: #fff;

text-decoration: none;

display: inline-block;

margin: 0 30px;

}

.body {

width: 1300px;

height: 600px;

margin: 0 auto;

}

.l1,

.l2 {

width: 40%;

margin-top: 30px;

float: left;

line-height: 50px;

}

ul {

list-style-type: none;

}

span {

background: pink;

}

.footer {

width: 100%;

height: 100px;

background: black;

bottom: 0;

}

.txt2 {

text-align: center;

}

</style>

</head>

<body>

</div>

</div>

<ul>

<li>

<span>职业路径</span>  HTML5与CSS3实现动态网页

</li>

<li>

<span>职业路径</span>  零基础入门Android语法与界面

</li>

<li>

<span>职业路径</span>  iOS基础语法与常用控件

</li>

<li>

<span>职业路径</span>  PHP入门开发

</li>

<li>

<span>职业路径</span>  JAVA入门开发

</li>

</ul>

</div>

HTML  CSS  JavaScript<br />

HTML5  CSS  JQuery<br />

移动端基础  移动端APP开发

</div>

</div>

</body>

</html>

1、导航项在窗口缩小的时候那些字会自动跑下来

2、主体部分我设置父元素宽度1300px，已经快接近整个窗口的宽度了，然后给子元素的两列设置宽度为50%，结果第一列为什么离左侧那么远呢？给两列都设置display：inline-block或者float：left可是他们就是不在一行为什么呢？当我把宽度调整为30%的时候这两列才并列了，可是调为40%以后他们又不在一行了

Aurora_Meteor 2020-02-21

源自：CSS网页布局基础 2-10 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-02-22 10:49:22

同学你好，问题解答如下：

1.窗口缩小页面也会缩小，一行放不下了肯定会被挤下去，这个很正常。当前是电脑端布局页面，在电脑上正常显示就行。页面自适应属于移动端布局，到后面移动端布局时再去考虑哦。

2.logo区域受到行高影响，且img和a是行内元素，也会产生间隙，导致高度溢出。所以主体内容浮动不过去。

如下调整：

去掉行高，并把行内元素转换为块元素

3.不在以后说明一行放不下被挤下去了，这个也是因为上面第二个问题的影响。修改上面的代码之后，设置40%或者50%都正常了。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

Aurora_Meteor 提问者 #1

主体部分的那些元素不都是块元素吗？所以不存在高度溢出问题啊。我试了一下发现我的代码第一列离最左侧不远...就用我上面问题中发的代码，不知道这是怎么回事。我发现设置宽度50%以后他们就自动靠所处列的最左侧了，如果再设置左右内边距或外边距的话一行放不下了他们就会不在一行排列。如果设置宽度小于50%，再设置了左右内外边距后，两列的边距加上设置的宽度超过主体宽度的话会不在一行，不超过的话还是在一行的。所以不知道您第三点里说的是受什么影响？

2020-02-22 11:32:30