display两端对齐
时间: 2023-09-29 12:04:04 浏览: 51
在CSS中,使用display属性可以设置元素的显示方式。display:inline-block将元素作为内联块级元素显示,其特点是可以设置宽度、高度、内外边距等属性,并且元素会在同一行内显示,但是可以通过设置宽度来控制多个元素的宽度以实现两端对齐的效果。
如果要实现display:inline-block元素的两端对齐布局,可以结合使用text-align:justify属性。在父元素上设置text-align:justify,可以使子元素(即display:inline-block元素)在同一行内两端对齐显示。注意,这种方式只对有多个子元素的情况有效,且最后一行仍然是左对齐的。
下面是一个示例CSS代码,可以实现display:inline-block元素的两端对齐布局:
ul {
text-align: justify;
}
li {
display: inline-block;
}
通过将li元素设置为display:inline-block,可以让每个li元素在同一行内显示,并且通过ul元素的text-align:justify属性可以使li元素在同一行内两端对齐显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [display:inline-block/text-align:justify下列表的两端对齐布局](https://blog.csdn.net/wuyou1336/article/details/74157553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)