一个标签的宽度怎么等于它父元素的父元素的20%
时间: 2024-02-05 12:12:22 浏览: 21
可以使用CSS中的calc()函数来实现。假设要设置标签的宽度为其父元素的父元素的20%,可以这样写:
```
.tag {
width: calc(20% - 10px); /* 10px是标签的padding和border的宽度 */
}
```
其中,calc()函数可以进行数学计算,这里用20%减去10px得到标签的实际宽度。注意,这里减去的10px是标签的padding和border的宽度,因为这些宽度也会占用标签的空间。
相关问题
css 设置元素文字超出父标签宽度时不换行
可以使用 CSS 的 white-space 属性来实现,在父标签中设置 white-space: nowrap;。这会阻止元素在父标签的边界处自动换行。
例如:
```css
.parent {
width: 200px;
border: 1px solid black;
white-space: nowrap;
}
.child {
width: 300px;
border: 1px solid red;
}
```
```html
<div class="parent">
<div class="child">这是一段超长的文字,它将会超出父标签的宽度,但是不会自动换行。</div>
</div>
```
这样,即使子元素的宽度超出了父标签的宽度,文字也不会自动换行,而是一直显示在同一行上,直到到达父标签的边界。
css 父标签宽度为0时覆盖里面的所有内容
当父标签的宽度为0时,其实是将整个父标签隐藏了,所以里面的所有内容都会被隐藏。如果想要让父标签不隐藏,可以尝试以下方法:
1. 修改父标签的 display 属性为 inline-block 或者 block,这样父标签就会根据内容自动调整宽度。
2. 设置父标签的宽度为一个固定值或者一个百分比值,这样父标签就会有一个明确的宽度。
3. 将父标签的 overflow 属性设置为 visible,这样就可以让父标签的内容溢出到父标签外面。
4. 将父标签的 position 属性设置为 absolute 或者 relative,这样父标签就可以根据其父元素或者自身来定位。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)