Question

   <!-- 6장 연습문제 4 -->
<html lang = "ko">
    <head>
        <meta charset = "UTF-8">
        <style>
        img{margin-left: auto; margin-right: auto; display: block;

        }
        .hyper{
            text-decoration-line:none; 
        }

        .text{
            border : 1px solid black;
            text-align: center;
            color:black;

        }
        .text:hover{

            background-color:yellow;
            color: red;
            text-decoration-line:none;
        }

        </style>
    </head>

    <body>
        <img src = "images/book.png" >
        <a href = "http://naver.com" class = "hyper">
        <p class = "text">[책 자세히 보기]</p> </a>

    </body>
</html>

我想在光标时仅在文本下添加背景颜色 Original image

像这样。但它就像这样工作↓
What I want

我认为边界可能是解决方案但它是相同的，太长了，从文本中走出来。

如何解决这个问题？给我解决方案PLZ！

Answer 1

添加新div，并将<p>放入div中。将text-align属性设置为div。

<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <style>
            img{margin-left: auto; margin-right: auto; display: block;

            }
            .hyper{
                text-decoration-line:none;
            }

            .text{
                display: inline-block;
                border : 1px solid black;
                color:black;

                vertical-align: middle;


            }
            .text:hover{

                background-color:yellow;
                color: red;
                text-decoration-line:none;
            }

            div {
                text-align: center;
            }

        </style>
    </head>

    <body>
    <img src="images/book.png">

    <div>
        <a href="http://naver.com" class="hyper">
            <p class="text">[책 자세히 보기]</p>
        </a>
    </div>

    </body>
    </html>

Answer 2

检查文本类元素的宽度。

块元素的宽度值为100％。

使用display：inline-block来解决这个问题。

默认情况下，文本是一个带有块属性的p元素。

宽度值为100％。

检查文本元素是否显示：inline-block，

尝试居中text-align：center

Answer 3

第二个答案很好，因为如果我们使用display：inline-block，它会对相关的div空间产生影响。

如何紧紧地应用文本的背景颜色？（HTML5，CSS3）

3 个答案:

如何紧紧地应用文本的背景颜色？ （HTML5，CSS3）

3 个答案:

如何紧紧地应用文本的背景颜色？（HTML5，CSS3）