                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

我想试试在<code>里加入并设置内的样式，想问问没显示出来的问题在哪，新手小白请教大佬

<!DOCTYPE HTML>

<html>

<head>

<title>code标签介绍</title>

</head>

<body>

我们可能知道水平渐变的实现，类似这样： <code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code>

</body>

</html>

慕圣2206865

2019-08-06

源自：初识HTML(5)+CSS(3)-升级版 3-13

关注问题我要回答

1527

操作

收起

4 回答

要嗨心回答被采纳 +2 积分
2019-08-06

code是行级元素，span是块级元素，应该把span放在code前面就可以显示，还有span里的color输入错了。

0 回复有任何疑惑可以回复我~

收起回答

慕圣2206865 提问者

谢谢我做了更改之后就没有报错可为啥没有体现出 text-align：center

2019-08-07 回复有任何疑惑可以回复我~

sdarks
2019-08-13

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>code标签介绍</title>
    <style type="text/css">
    span{
        font-size:20px;
        color:red;
    }
    p{
        text-align:center;
    }
    </style>
</head>
<body>
    <p>我们可能知道水平渐变的实现，类似这样：<br />
    <code>
        <span>
            {background-image:linear-gradient(left, red 100px, yellow 200px);}
        </span>
    </code>
    </p>
</body>
</html>

code语法错误是因为网站验证机制问题，而居中效果的确可以显示，向上面的代码就是把p段落内的文本居中了。如果你只想要让code内的内容居中可以试试下面的代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>code标签介绍</title>
    <style type="text/css">
    span{display:block;
        font-size:20px;
        color:red;
        text-align:center;
    }
    </style>
</head>
<body>
    <p>我们可能知道水平渐变的实现，类似这样：<br />
    <code>
        <span>
            {background-image:linear-gradient(left, red 100px, yellow 200px);}
        </span>
    </code>
    </p>
</body>
</html>

2 回复有任何疑惑可以回复我~

收起回答

慕圣2206865 提问者
2019-08-13

<!DOCTYPE HTML>

<html>

<head>

<title>code标签介绍</title>

</head>

<body>

span{

font-size:20px;

color:red;

text-align:center;}

</style>

我们可能知道水平渐变的实现，类似这样：

<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

Maoli_

span样式里有个display:block;将他变成了块元素

2019-11-17 回复有任何疑惑可以回复我~

sdarks
2019-08-07

这里的问题是你color:red;的代码写错，只要改下就能把颜色的样式正确显示出来，不需要将span放在code前面。span和code都是行内元素(内联元素)。

至于text-align:center没体现出来是因为span是行内元素，你需要把text-align:center放在属于它父元素的块状元素里面，譬如body或p标签。

0 回复有任何疑惑可以回复我~

收起回答

慕圣2206865 提问者

非常谢谢您给我的帮助因为楼上有人给过我解答而且基本解决了我的问题今天才看到您的回答我试着把span放在code里边可以显示但是text-align：center这个还是没有解决不论我是把style放在head、body、还是p里都没有改变而且这次左边没有小红× 但是提交表示不正确说是code语法错误

2019-08-13 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226039 人
解答问题 18236 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

3 回答我想试试在span里面定义字体的大小，怎么右边字体大小没有变化呢

2 回答想给span标签里的胆小如鼠加边框，为什么加不了（问题在加粗部分）

4 回答有关position:relative.为什么例题的的内容部分显示在整个页面而练习里的则显示在框里

2 回答span的问题

搜索更多本课相关问答

我想试试在<code>里加入并设置内的样式，想问问没显示出来的问题在哪，新手小白请教大佬

我要回答关注问题

我想试试在<code>里加入<span>并设置<span>内的样式，想问问没显示出来的问题在哪，新手小白请教大佬

4 回答

本课相似问答

我想试试在<code>里加入<span>并设置<span>内的样式，想问问没显示出来的问题在哪，新手小白请教大佬

热搜

最近搜索清空

我想试试在<code>里加入<span>并设置<span>内的样式，想问问没显示出来的问题在哪，新手小白请教大佬

4 回答

本课相似问答

我想试试在<code>里加入<span>并设置<span>内的样式，想问问没显示出来的问题在哪，新手小白请教大佬