[已解决]新手练习

zxcbcv · 发表于 2020-10-25 12:55:42

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 zxcbcv 于 2020-10-25 15:54 编辑

在图书馆里借了本书里面有个练习题

文字的边框怎么对齐呀？

如果还有什么问题请大家指点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-34</title>
<style>

body{
background-color:tomato;
text-align: center;
}
h1{
color: white;

}

#M{
color: black;
}
p{
padding:10px; /*文本外边距*/
word-spacing:20px; /*字间距*/

}
.a1{
padding: 10px;

}
span{

padding: 10px;
background-color: white;
}

</style>
</head>
<body>
<h1>Miaov.com</h1>
新鲜水果苹果梨橙子奇异果火龙果草莓榴莲
蔬菜蛋品蛋品叶菜类根菜类葱姜蒜椒鲜菌菇茄瓜果类
精选肉类猪肉牛肉羊肉鸡肉鸭肉冷鲜肉特色肉类
海鲜水产鱼类虾类蟹类贝类海参活鲜特色水产
冷冻速饮水饺/混沌汤圆/元宵面点/面食冰淇淋速冻半成品
中外名酒白酒葡萄酒洋酒啤酒黄酒/养生酒收藏酒/陈年老酒
进口食品牛奶饼干/蛋糕糖果/巧克力休闲零食冲调饮品调味
</body>
</html>

最佳答案

月排行榜 / 总排行榜

kogawananari

2020-10-25 16:06:49

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-34</title>
    <style>
        body{background-color:tomato;padding:0;margin:0;box-sizing:border-box}
        h1{color:white}
        #M{color:black}
        header, section{width:80vw;margin:auto}
        header{text-align:center}
        p{padding:10px;word-spacing:20px}
        span{display:inline-block;background-color:white;text-align:center;padding:10px 0}
        p>span:nth-child(1){width:20%}
        p>span:nth-child(2){width:80%}

        </style>
</head>
<body>
    <header>
        <h1><span id="M">M</span>iaov.com</h1>
    </header>
    <section>
        <p><span class="a1" style="background-color: blue;" >新鲜水果</span><span>苹果 梨 橙子 奇异果 火龙果 草莓 榴莲</span></p>
        <p><span class="a1" style="background-color: aqua;">蔬菜蛋品</span><span>蛋品 叶菜类 根菜类 葱姜蒜椒 鲜菌菇 茄瓜果类</span></p>
        <p><span class="a1" style="background-color: blueviolet;">精选肉类</span><span>猪肉 牛肉 羊肉 鸡肉 鸭肉 冷鲜肉 特色肉类</span></p>
        <p><span class="a1" style="background-color: brown;">海鲜水产</span><span>鱼类 虾类 蟹类 贝类 海参 活鲜 特色水产</span></p>
        <p><span class="a1" style="background-color: chocolate;">冷冻速饮</span><span>水饺/混沌 汤圆/元宵 面点/面食 冰淇淋 速冻半成品</span></p>
        <p><span class="a1" style="background-color: cornflowerblue;">中外名酒</span><span>白酒 葡萄酒 洋酒 啤酒 黄酒/养生酒 收藏酒/陈年老酒</span></p>
        <p><span class="a1" style="background-color: darkgreen;">进口食品</span><span>牛奶 饼干/蛋糕 糖果/巧克力 休闲零食 冲调饮品 调味</span></p>
    </section>
</body>
</html>

跳转到最佳答案楼层

一只胖麻圆 · 发表于 2020-10-25 15:08:57

有一种办法是使用空格填充，目前还没想出别的办法

不二如是 · 发表于 2020-10-25 15:47:26

问题？

zxcbcv · 发表于 2020-10-25 15:56:58

不二如是发表于 2020-10-25 15:47
问题？

我问题更新了我想问下这几行文本怎么左右对齐

yuesezhenmei · 发表于 2020-10-25 15:57:33

给他们一个共同的父元素，用position定位，或者用text-indent

kogawananari · 发表于 2020-10-25 16:06:49

这个最佳答案由 kogawananari 给出，感谢 kogawananari 的回答。

单击隐藏图章

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-34</title>
    <style>
        body{background-color:tomato;padding:0;margin:0;box-sizing:border-box}
        h1{color:white}
        #M{color:black}
        header, section{width:80vw;margin:auto}
        header{text-align:center}
        p{padding:10px;word-spacing:20px}
        span{display:inline-block;background-color:white;text-align:center;padding:10px 0}
        p>span:nth-child(1){width:20%}
        p>span:nth-child(2){width:80%}

        </style>
</head>
<body>
    <header>
        <h1><span id="M">M</span>iaov.com</h1>
    </header>
    <section>
        <p><span class="a1" style="background-color: blue;" >新鲜水果</span><span>苹果 梨 橙子 奇异果 火龙果 草莓 榴莲</span></p>
        <p><span class="a1" style="background-color: aqua;">蔬菜蛋品</span><span>蛋品 叶菜类 根菜类 葱姜蒜椒 鲜菌菇 茄瓜果类</span></p>
        <p><span class="a1" style="background-color: blueviolet;">精选肉类</span><span>猪肉 牛肉 羊肉 鸡肉 鸭肉 冷鲜肉 特色肉类</span></p>
        <p><span class="a1" style="background-color: brown;">海鲜水产</span><span>鱼类 虾类 蟹类 贝类 海参 活鲜 特色水产</span></p>
        <p><span class="a1" style="background-color: chocolate;">冷冻速饮</span><span>水饺/混沌 汤圆/元宵 面点/面食 冰淇淋 速冻半成品</span></p>
        <p><span class="a1" style="background-color: cornflowerblue;">中外名酒</span><span>白酒 葡萄酒 洋酒 啤酒 黄酒/养生酒 收藏酒/陈年老酒</span></p>
        <p><span class="a1" style="background-color: darkgreen;">进口食品</span><span>牛奶 饼干/蛋糕 糖果/巧克力 休闲零食 冲调饮品 调味</span></p>
    </section>
</body>
</html>

kogawananari · 发表于 2020-10-25 16:09:09

好多年没写css了
开头一个box-sizing:border-box是必须的这样不费脑子一些
然后就是span这种行标签不要给左右的padding 只给上下的才行

laihoo · 发表于 2020-10-25 16:17:45

加油

昆阳 · 发表于 2020-10-25 16:27:16

学习！厉害！！！

一抹心尘 · 发表于 2020-10-26 14:43:53

kogawananari 发表于 2020-10-25 16:06

这个代码有点好看啊

youhuangzyzy · 发表于 2020-10-26 20:13:12

厉害！

Rinxoz · 发表于 2020-10-28 23:44:53

学习先

Ray-先生 · 发表于 2020-10-30 21:59:17

？？

账号		自动登录	找回密码
密码			立即注册

[已解决]新手练习

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币