如何实现图片选项自适应屏幕并排不溢出，hover显示span内容

需求实现目标 #

• 包含复选框、图片的选项卡片并排排列，自动适配屏幕宽度，不会超出可视区域
• 鼠标悬停在选项卡片（复选框/图片）上时，右侧显示对应编程语言名称

修改后的完整代码 #

CSS 样式

.hide_name{
    display: none;
    background-color: white;
    color: black;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 2px;
    margin-left: 8px;
}
.prog_lang{
    margin: 0.5rem;
    vertical-align: middle;
}
.programming_language > div:hover .hide_name{
    display: inline-block;
}
.programming_language{
    margin: 0 10px;
    display: flex;
    flex-wrap: wrap; /* 关键：自动换行，避免超出屏幕 */
    gap: 8px; /* 选项间间距优化 */
}
.programming_language > div{
    padding: 8px;
    display: flex;
    align-items: center;
}
.programming_language input[type="checkbox"]{
    vertical-align: middle;
}

HTML 结构

<div id="id_programming_language" class="programming_language">
    <div>
        <label for="id_programming_language_0">
            <input type="checkbox" name="programming_language" value="1" id="id_programming_language_0">
            <img src="https://www.svgrepo.com/show/331553/python-package-index.svg" width="50px" class="prog_lang">
            <span class="hide_name">Python</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_1">
            <input type="checkbox" name="programming_language" value="2" id="id_programming_language_1">
            <img src="https://www.svgrepo.com/show/43101/java.svg" width="50px" class="prog_lang">
            <span class="hide_name">java</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_2">
            <input type="checkbox" name="programming_language" value="3" id="id_programming_language_2">
            <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/c-program-icon.png" width="50px" class="prog_lang">
            <span class="hide_name">C</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_3">
            <input type="checkbox" name="programming_language" value="4" id="id_programming_language_3">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1822px-ISO_C%2B%2B_Logo.svg.png" width="50px" class="prog_lang">
            <span class="hide_name">C++</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_4">
            <input type="checkbox" name="programming_language" value="5" id="id_programming_language_4">
            <img src="https://seeklogo.com/images/C/c-sharp-c-logo-02F17714BA-seeklogo.com.png" width="50px" class="prog_lang">
            <span class="hide_name">C#</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_5">
            <input type="checkbox" name="programming_language" value="6" id="id_programming_language_5">
            <img src="https://seeklogo.com/images/G/go-logo-046185B647-seeklogo.com.png" width="50px" class="prog_lang">
            <span class="hide_name">go</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_6">
            <input type="checkbox" name="programming_language" value="7" id="id_programming_language_6">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png" width="50px" class="prog_lang">
            <span class="hide_name">javascript</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_7">
            <input type="checkbox" name="programming_language" value="8" id="id_programming_language_7">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png" width="50px" class="prog_lang">
            <span class="hide_name">typescript</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_8">
            <input type="checkbox" name="programming_language" value="9" id="id_programming_language_8">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Perl_language_logo.svg/1200px-Perl_language_logo.svg.png" width="50px" class="prog_lang">
            <span class="hide_name">perl</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_9">
            <input type="checkbox" name="programming_language" value="10" id="id_programming_language_9">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/2560px-PHP-logo.svg.png" width="50px" class="prog_lang">
            <span class="hide_name">php</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_10">
            <input type="checkbox" name="programming_language" value="11" id="id_programming_language_10">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Ruby_logo.svg/1200px-Ruby_logo.svg.png" width="50px" class="prog_lang">
            <span class="hide_name">ruby</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_11">
            <input type="checkbox" name="programming_language" value="12" id="id_programming_language_11">
            <img src="https://seeklogo.com/images/S/scala-logo-8570724313-seeklogo.com.png" width="50px" class="prog_lang">
            <span class="hide_name">scala</span>
        </label>
    </div>
    <div>
        <label for="id_programming_language_12">
            <input type="checkbox" name="programming_language" value="13" id="id_programming_language_12">
            <img src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width="50px" class="prog_lang">
            <span class="hide_name">swift</span>
        </label>
    </div>
</div>

关键修改说明 #

1. 自适应布局：给.programming_language添加flex-wrap: wrap，让选项在屏幕宽度不足时自动换行，避免超出可视区域；同时用gap统一选项间间距
2. 修正ID重复问题：原代码中#img和#hide_name是重复ID（HTML中ID必须唯一），改为类选择器.prog_lang和.hide_name
3. 优化hover触发：确保选项卡片内任意元素（复选框/图片）被hover时，都能触发名称显示；调整display: inline-block让名称排版更整齐
4. 布局细节优化：调整图片margin、添加垂直对齐样式，让复选框、图片、名称的排版更协调

内容的提问来源于stack exchange，提问作者Shreyash mishra