inline-block不横向排列
时间: 2024-01-19 15:04:20 浏览: 24
以下是一个演示如何使用inline-block不横向排列的例子:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #000;
}
.item {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
```
在上面的例子中,我们创建了一个容器(class="container"),并在其中放置了三个项目(class="item")。通过将项目的display属性设置为inline-block,我们可以使它们在同一行上显示,而不是默认的块级元素的垂直排列。每个项目都有固定的宽度和高度,并且通过设置border属性添加了边框,以便更清楚地看到它们的位置。
相关问题
css横向排列不换行超出隐藏
可以使用CSS中的`white-space`和`overflow`属性来实现横向排列不换行超出隐藏的效果。
HTML代码:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
```
CSS代码:
```css
.container {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
}
.item {
display: inline-block; /* 块级元素横向排列 */
width: 100px;
height: 100px;
background-color: #ccc;
margin-right: 10px;
}
```
效果如下:
![横向排列不换行超出隐藏示例图](https://img-blog.csdn.net/2018051611084655?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhdGVybWFyazI4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80)
.product-list li button { background-color: rgb(137, 232, 245); border: none; padding: 5px 25px; display: inline-block; cursor: pointer; font-size: 16px; transition: all 0.3s ease-in-out; }解析代码
这段代码是用来设置商品列表中每个商品的按钮样式的CSS代码。具体来说,`.product-list li button`是一个选择器,它表示选中了所有在class为`product-list`的列表中的li元素下的button元素。接下来是一系列属性和属性值,它们的含义如下:
- `background-color: rgb(137, 232, 245);`:设置按钮的背景颜色为一种RGB颜色值。
- `border: none;`:去掉按钮的边框。
- `padding: 5px 25px;`:设置按钮的内边距为5像素上下和25像素左右。
- `display: inline-block;`:将按钮显示为内联块元素,让其横向排列。
- `cursor: pointer;`:当鼠标悬停在按钮上时,鼠标指针会变成手型,表示该元素可以被点击。
- `font-size: 16px;`:设置按钮文字的字体大小为16像素。
- `transition: all 0.3s ease-in-out;`:设置按钮的过渡效果,让它在鼠标悬停时有一个平滑的颜色变化效果。其中,`all`表示对所有属性进行过渡,`0.3s`表示过渡的时间为0.3秒,`ease-in-out`表示过渡效果为先加速后减速。