小编Ale*_*gin的帖子

线性渐变在 Outlook 中不起作用

我知道这是一个非常基本的问题，但我尝试了很多 StackOverflow 解决方案，但没有任何效果。

这是我正在使用的 HTML 内容。

<html>
<style>
  div:after {
    content: "\A";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(216, 38, 38, 0.7)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 0%, rgba(216, 38, 38, 0.7) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 0, …

Run Code Online (Sandbox Code Playgroud)

html javascript css email gradient

Shu*_*zad

2020 02-14

9
推荐指数

1
解决办法

1万
查看次数

使用显示时没有底部填充：网格和滚动

我有一个容器div，里面有一些填充物，display: grid并overflow: auto已设置。当子级div的高度大于父级的高度并且出现滚动条时，它会滚动，以便没有底部填充。

这是一个提琴手。

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.child {
    height: 500px;
    background: #000;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
    <div class="child"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

但是，如果容器的制作方式不是display: grid，则向下滚动时会出现底部填充。

display: grid这是元素的预期行为吗？如果是这样，为什么？恢复底部填充的正确方法是什么，最好只使用CSS？

css scroll padding css-grid

Ale*_*mov

2020 02-04

6
推荐指数

1
解决办法

1724
查看次数

如何在flutter中创建水平和垂直可滚动的小部件

示例布局图像

我正在尝试创建附加布局。它有两个容器。

首先是一个固定大小的水平滚动框。
其次是一张卡片，它占用剩余空间，里面有列表视图。

我怎样才能实现这种布局？

如您所见，两个容器的滚动方向不同。

代码一直工作到标签视图（第一个框），但是一旦我添加第二个框，即卡片，它就没有显示任何内容并且在控制台上出现错误，如下所示..

I/flutter ( 9412):   AnimatedDefaultTextStyle ? _InkFeatures-[GlobalKey#85877 ink renderer] ?
I/flutter ( 9412):   NotificationListener<LayoutChangedNotification> ? ?
I/flutter ( 9412):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
I/flutter ( 9412):   constraints: BoxConstraints(0.0<=w<=340.0, 0.0<=h<=Infinity)
I/flutter ( 9412):   size: MISSING
I/flutter ( 9412):   additionalConstraints: BoxConstraints(biggest)
I/flutter ( 9412): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 9412):   RenderFlex#93e12 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 9412):     RenderRepaintBoundary#977a7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 9412):       RenderCustomPaint#b6be8 NEEDS-LAYOUT …

Run Code Online (Sandbox Code Playgroud)

flutter flutter-layout

sat*_*tya

2020 02-21

5
推荐指数

2
解决办法

1万
查看次数

如何在图标上放置通知徽章？

我正在尝试让通知徽章发挥作用，我就快到了:)

当我在那里有通知徽章时，它工作得很好，但如果我删除它，图标会因某种原因下降，我不明白为什么。

.icon-badge-group .icon-badge-container {
  display: inline-block;
  margin-left: 15px;
}

.icon-badge-group .icon-badge-container:first-child {
  margin-left: 0
}

.icon-badge-container {
  margin-top: 20px;
  position: relative;
}

.icon-badge-icon {
  font-size: 30px;
  position: relative;
}

.icon-badge {
  background-color: red;
  font-size: 12px;
  color: white;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 35%;
  position: relative;
  top: -35px;
  left: 17px;
}

Run Code Online (Sandbox Code Playgroud)

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <div class="icon-badge-container">
    <i class="far fa-envelope icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>
  <div class="icon-badge-container">
    <i class="far fa-user icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>

  <div class="icon-badge-group">
    <div class="icon-badge-container"> …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

Joh*_*son

2020 02-12

4
推荐指数

1
解决办法

8171
查看次数

为那些启用的选择选项设置粗体字体

我有一个 Select ，里面有一些 Option 。如何font-weight: bold只为那些已启用的选项做准备？

这是示例代码：

<select>
  <optgroup label="group1">
    <option value="2016" disabled>2016</option>
    <option value="2017" disabled>2017</option>
    <option value="2018" selected="selected">2018</option>
    <option value="2019">2019</option>
  </optgroup>
  <optgroup label="group2">
    <option value="2020" disabled>2020</option>
    <option value="2021">2021</option>
  </optgroup>
</select>

Run Code Online (Sandbox Code Playgroud)

2016, 2017, 2020 为正常字体，多为灰色（或特殊色码），2018,2019,2021 为粗体。怎么做？

注意：我不会为每个选项添加内联代码。

谢谢。

html css

Use*_*ser

2020 02-01

1
推荐指数

1
解决办法

192
查看次数

(Bootstrap 4)：将按钮与文本对齐在同一行

如何将所有内容对齐divs在同一条线上。我的意思是我希望按钮像这样的图像一样以文本居中，例如，社交图标像文本一样居中，而不是像我在黑暗中那样向下

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
    <div class="container d-flex flex-sm-column  justify-content-between py-3">
      <div class="row  py-4 text-center align-content-between flex-wrap">
        <div class="col-lg-4 mb-3">
          <p class="text-secondary">Copyright &copy; Saud</p>
        </div>
        <div class="col-lg-4 mb-3 ">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">
            Contact Us
          </button>
        </div>
        <div class="col-lg-4 mb-3">
          <ul class="list-inline quicklinks">
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

Run Code Online (Sandbox Code Playgroud)

html css bootstrap-4

Sao*_*awy

2020 02-12

1
推荐指数

1
解决办法

4633
查看次数