英文:
div with content align out of order with respect to div without content
问题
在下面的代码中，带有内容的<button>元素与其他没有内容的<button>元素的顺序不一致。当行中的所有元素都有内容时，不会发生这种情况。有任何想法为什么会发生这种情况吗？（提前感谢您的帮助）。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
}
</style>
<div>
<div>
<button> </button>
<button> </button>
<button> </button>
</div>
<div>
<button> </button>
<button> X </button>
<button> </button>
</div>
<div>
<button> </button>
<button> </button>
<button> </button>
</div>
</div>
<!-- end snippet -->
英文:
In the below code, the <button> element with the content is out of order with respect to the other <button> elements without content. This doesn't occur when all the elements in the row has some content in them. Any idea why this is happening? (Thanks in advance for the help).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
}
</style>
<div>
<div>
<button> </button>
<button> </button>
<button> </button>
</div>
<div>
<button> </button>
<button> X </button>
<button> </button>
</div>
<div>
<button> </button>
<button> </button>
<button> </button>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
这是解决方案：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.button-container {
display: flex;
align-items: center;
}
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
}
<!-- 语言: lang-html -->
<div class="container">
<div class="button-container">
<button></button>
<button></button>
<button></button>
</div>
<div class="button-container">
<button></button>
<button>X</button>
<button></button>
</div>
<div class="button-container">
<button></button>
<button></button>
<button></button>
</div>
</div>
<!-- 结束代码片段 -->
英文:
Here is the solution:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.button-container {
display: flex;
align-items: center;
}
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
}
<!-- language: lang-html -->
<div class="container">
<div class="button-container">
<button></button>
<button></button>
<button></button>
</div>
<div class="button-container">
<button></button>
<button>X</button>
<button></button>
</div>
<div class="button-container">
<button></button>
<button></button>
<button></button>
</div>
</div>
<!-- end snippet -->
答案2
得分: 1
你应该将属性 vertical-align: top; 添加到按钮样式中：
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
vertical-align: top;
}
英文:
you should add property vertical-align: top; to button styles:
button {
background-color: #ffff;
border: 1px solid #999;
width: 120px;
height: 120px;
margin-top: -1px;
margin-right: -1px;
font-size: 50px;
font-weight: bold;
vertical-align: top;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论