如何使图像选项彼此对齐，以便屏幕不会溢出

Question

我希望我的div项彼此对齐，并且希望当一个人悬停在复选框上或图像跨度标记内容显示在右边屏幕上，但是运行代码时，您可以看到屏幕的div溢出。

​

#hide_name{
    display: none;
    background-color: white;
    color: black;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 2px;
}
#img{
    margin: 2rem;
}
.programming_language > div:hover #hide_name{
    display: inline;

}
.programming_language{
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
}
.programming_language > div{
    padding: 10px;
    
}

<div id="id_programming_language" class="programming_language"><div>
    <label for="id_programming_language_0"><input type="checkbox" name="programming_language" value="1" class="programming_language" id="id_programming_language_0">
 <img id="img" src="https://www.svgrepo.com/show/331553/python-package-index.svg" width="50px" class="prog_lang"><span id="hide_name">Python</span></label>

</div><div>
    <label for="id_programming_language_1"><input type="checkbox" name="programming_language" value="2" class="programming_language" id="id_programming_language_1">
 <img id="img" src="https://www.svgrepo.com/show/43101/java.svg" width="50px" class="prog_lang"><span id="hide_name">java</span></label>

</div><div>
    <label for="id_programming_language_2"><input type="checkbox" name="programming_language" value="3" class="programming_language" id="id_programming_language_2">
 <img id="img" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/c-program-icon.png" width="50px" class="prog_lang"><span id="hide_name">C</span></label>

</div><div>
    <label for="id_programming_language_3"><input type="checkbox" name="programming_language" value="4" class="programming_language" id="id_programming_language_3">
 <img id="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 id="hide_name">C++</span></label>

</div><div>
    <label for="id_programming_language_4"><input type="checkbox" name="programming_language" value="5" class="programming_language" id="id_programming_language_4">
 <img id="img" src="https://seeklogo.com/images/C/c-sharp-c-logo-02F17714BA-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">C#</span></label>

</div><div>
    <label for="id_programming_language_5"><input type="checkbox" name="programming_language" value="6" class="programming_language" id="id_programming_language_5">
 <img id="img" src="https://seeklogo.com/images/G/go-logo-046185B647-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">go</span></label>

</div><div>
    <label for="id_programming_language_6"><input type="checkbox" name="programming_language" value="7" class="programming_language" id="id_programming_language_6">
 <img id="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 id="hide_name">javascript</span></label>

</div><div>
    <label for="id_programming_language_7"><input type="checkbox" name="programming_language" value="8" class="programming_language" id="id_programming_language_7">
 <img id="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 id="hide_name">typescript</span></label>

</div><div>
    <label for="id_programming_language_8"><input type="checkbox" name="programming_language" value="9" class="programming_language" id="id_programming_language_8">
 <img id="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 id="hide_name">perl</span></label>

</div><div>
    <label for="id_programming_language_9"><input type="checkbox" name="programming_language" value="10" class="programming_language" id="id_programming_language_9">
 <img id="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 id="hide_name">php</span></label>

</div><div>
    <label for="id_programming_language_10"><input type="checkbox" name="programming_language" value="11" class="programming_language" id="id_programming_language_10">
 <img id="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 id="hide_name">ruby</span></label>

</div><div>
    <label for="id_programming_language_11"><input type="checkbox" name="programming_language" value="12" class="programming_language" id="id_programming_language_11">
 <img id="img" src="https://seeklogo.com/images/S/scala-logo-8570724313-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">scala</span></label>

</div><div>
    <label for="id_programming_language_12"><input type="checkbox" name="programming_language" value="13" class="programming_language" id="id_programming_language_12">
 <img id="img" src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width="50px" class="prog_lang"><span id="hide_name">swift</span></label>

</div>
</div>
</div>

​

我想要这样的东西

​

span内容仅在悬停时显示，所有选项都停留在屏幕上，而不是屏幕溢出。

Answer 1

试试这个：

​

div#id_programming_language div label {
    display: flex;
    align-items: center;
}

#hide_name{
    visibility: hidden;
    background-color: white;
    color: black;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 2px;
    width: 50px;
}
#img{
    margin: 1rem;
    height: 50px;
}
.programming_language > div:hover #hide_name{
    visibility: visible;

}
.programming_language{
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
}
.programming_language > div{
    padding: 10px;
    
}

<div id="id_programming_language" class="programming_language"><div>
    <label for="id_programming_language_0"><input type="checkbox" name="programming_language" value="1" class="programming_language" id="id_programming_language_0">
 <img id="img" src="https://www.svgrepo.com/show/331553/python-package-index.svg" width="50px" class="prog_lang"><span id="hide_name">Python</span></label>

</div><div>
    <label for="id_programming_language_1"><input type="checkbox" name="programming_language" value="2" class="programming_language" id="id_programming_language_1">
 <img id="img" src="https://www.svgrepo.com/show/43101/java.svg" width="50px" class="prog_lang"><span id="hide_name">java</span></label>

</div><div>
    <label for="id_programming_language_2"><input type="checkbox" name="programming_language" value="3" class="programming_language" id="id_programming_language_2">
 <img id="img" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/c-program-icon.png" width="50px" class="prog_lang"><span id="hide_name">C</span></label>

</div><div>
    <label for="id_programming_language_3"><input type="checkbox" name="programming_language" value="4" class="programming_language" id="id_programming_language_3">
 <img id="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 id="hide_name">C++</span></label>

</div><div>
    <label for="id_programming_language_4"><input type="checkbox" name="programming_language" value="5" class="programming_language" id="id_programming_language_4">
 <img id="img" src="https://seeklogo.com/images/C/c-sharp-c-logo-02F17714BA-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">C#</span></label>

</div><div>
    <label for="id_programming_language_5"><input type="checkbox" name="programming_language" value="6" class="programming_language" id="id_programming_language_5">
 <img id="img" src="https://seeklogo.com/images/G/go-logo-046185B647-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">go</span></label>

</div><div>
    <label for="id_programming_language_6"><input type="checkbox" name="programming_language" value="7" class="programming_language" id="id_programming_language_6">
 <img id="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 id="hide_name">javascript</span></label>

</div><div>
    <label for="id_programming_language_7"><input type="checkbox" name="programming_language" value="8" class="programming_language" id="id_programming_language_7">
 <img id="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 id="hide_name">typescript</span></label>

</div><div>
    <label for="id_programming_language_8"><input type="checkbox" name="programming_language" value="9" class="programming_language" id="id_programming_language_8">
 <img id="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 id="hide_name">perl</span></label>

</div><div>
    <label for="id_programming_language_9"><input type="checkbox" name="programming_language" value="10" class="programming_language" id="id_programming_language_9">
 <img id="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 id="hide_name">php</span></label>

</div><div>
    <label for="id_programming_language_10"><input type="checkbox" name="programming_language" value="11" class="programming_language" id="id_programming_language_10">
 <img id="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 id="hide_name">ruby</span></label>

</div><div>
    <label for="id_programming_language_11"><input type="checkbox" name="programming_language" value="12" class="programming_language" id="id_programming_language_11">
 <img id="img" src="https://seeklogo.com/images/S/scala-logo-8570724313-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">scala</span></label>

</div><div>
    <label for="id_programming_language_12"><input type="checkbox" name="programming_language" value="13" class="programming_language" id="id_programming_language_12">
 <img id="img" src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width="50px" class="prog_lang"><span id="hide_name">swift</span></label>

</div>
</div>
</div>

​