麻烦老师看看

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>可设置宽和高的元素</title>
    <style type="text/css">
       div{ width:600px;height:200px;border:1px solid gray;font-size:14px;}
       p{width:30px;font-size:2em;}
       input{width:30%;height:25%;}
       .sub{width:100px;height:30px;background-color:orange;font-size:20px;}
    </style>
</head>
<body>
    <div>
        <p>登录</p>
        <span>请输入您的信息：</span><input type="text" class="input"><br>
        <input type="submit" class="sub">
    </div>
</body>
</html>

以下是我的效果

我是按照题目的提示来做的，为啥样式貌似不太对

打不死的女小强 2018-01-20

源自：盒子模型 3-12 编程练习

收起

3回答

好帮手慕糖回答被采纳获得+3积分 2018-01-22 09:47:52

你好，如上一个同学所说，这里超出就是因为登录的p标签的宽度你设置的是30px的问题，认真看下题意，这里是“ 宽度是父元素宽度的30%”，所以应该是30%。

祝学习愉快~

收起回答

打不死的女小强提问者 #1

非常感谢！

2018-01-22 12:43:47

提问者打不死的女小强 2018-01-21 14:50:05

麻烦老师看看啦

收起回答

明日阳光 2018-01-21 09:24:12

分析一下代码，你的父元素div字体大小是14px，然后登录的p标签的宽度你设置的是30px，字体大小是2em=2*父元素字体大小=24px，所以两个字大小超出了宽度，会出现换行。给出一下几点修改方案
1.子元素若想进行对齐，可以在父元素div里面设置align使子元素进行对齐。
2.登录字体大小要小于总宽度。

收起回答