小编kuk*_*kuz的帖子

柔性元件之间的间距?

的jsfiddle

我有一个显示flex的列表:

<ul>
    <li></li>
    ....

ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  background: gold;
}

li{
    flex-basis: 25%;
    background:grey;
 }
Run Code Online (Sandbox Code Playgroud)

现在我想在我的li元素之间留一些空格,添加边距或填充将元素推到下一行(当我有超过4个元素时,我想要flex包装).

我知道上面的内容可以通过框大小来解决,但我的主要问题是我想要元素之间的间距,但是第一个和最后一个元素排列在父元素的左侧和右侧.

怎么能实现这一目标?

例如.

|li|spacing|li|spacing|li|spacing|li|
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

8
推荐指数
1
解决办法
1万
查看次数

显示<li> <img rel="nofollow noreferrer" /> </ li>的不一致

我有一个非常简单的HTML标记问题,它在Chrome和Firefox中呈现不同.我想知道它是否是其中一个的错误.

代码很简单:

<ul>
    <li>
        <img />
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

问题是在Chrome中,<li />元素顶部有一些填充,但前提是它的内容是图像.例如文本没有问题.

示例小提琴:https://jsfiddle.net/8c4rujvu/1/

img {
  display: block;
  width: 500px;
}
li {
  border: 1px solid #f00;
}
Run Code Online (Sandbox Code Playgroud)
<ul>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>Some text</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

这是它在Firefox(50.0.2)中的显示方式: Firefox(50.0.2)

而在Chrome(55.0.2883.75米): 铬(55.0.2883.75米)

这里似乎有什么问题?

html css firefox google-chrome image

8
推荐指数
2
解决办法
317
查看次数

Flexbox 中的 CSS 网格仅在 Chrome 上无法按预期工作

我正在尝试创建一个包含标题和 2x2 CSS 网格的 flexbox。

  • flexbox ( .container) 填充整个视口。
  • 标题的高度是可变的。它可能会在页面打开时动态更改。
  • 网格中的四个单元格必须占据视口的剩余部分,并且它们的宽度和高度必须相等。

这是我现在所拥有的:

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

* { box-sizing: border-box; }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.header {
  background: lime;
}

.grid {
  flex: auto; /* fills the remaining part of the viewport below header */
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 2px;
}

.cell {
  padding: 10px;
  background: linear-gradient(to …
Run Code Online (Sandbox Code Playgroud)

html css flexbox css-grid

8
推荐指数
1
解决办法
4474
查看次数

React-将数组映射到子组件

我正在编码一个包含多个页面的网站。一个页面ComponentA,具有一个子组件,该子组件返回带有标题和段落的部分。

ComponentA传递数据中的数组作为对子项的支持。在孩子内部,一个map函数返回正确的段落。现在缺少的标题,你会怎么做传递title1paragraph1title2paragraph2等?

组分A:

import Child from "../components/child";

const ComponentA = () => {
  <Layout>
    <h1>Home Page</h1>
    <Child title={info.title} text={info.text} />
  </Layout>
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};
Run Code Online (Sandbox Code Playgroud)

子组件:

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map(text => {
        return (
          <div>
            <h3>{title}</h3>
            <p>{text}</p>
          </div>
        );
      })}
    </div>
  );
};
Run Code Online (Sandbox Code Playgroud)

javascript arrays reactjs

8
推荐指数
2
解决办法
1672
查看次数

在 material-ui 中打开扩展面板时移除额外空间

当在材质 UI 中单击第二个手风琴时,我想删除额外的空间。我看到当我们点击第二个手风琴时,它向下移动,但第一个手风琴和第二个手风琴之间有一个间隙。当第二个手风琴打开时,我们可以消除那个额外的间隙吗?

这是代码和框的链接。 https://codesandbox.io/s/yp9lmvwo1x

javascript reactjs material-ui

8
推荐指数
2
解决办法
5549
查看次数

如何在Flexbox布局中检查间隙支持

Firefox已经实现gap了Flexbox布局,而其他浏览器(例如Chrome)仅支持gap网格布局。如果gap在flexbox容器上添加,这会导致浏览器之间的差异。CSS @supports功能旨在处理浏览器尚不支持某些功能的情况。那么,如何测试对gapFlexbox的支持?

<style>
.flex {
  display: flex;
  gap: 20px;
}
</style>

<section class="flex">
  <div>Item One</div>
  <div>Item Two</div>
</section>
Run Code Online (Sandbox Code Playgroud)

请注意:即使我使用@supports grid-gap而不是gap,Firefox仍然会在flexbox容器上应用空白,而Chrome不会应用任何内容,因此该解决方案将无法使用。

我正在寻找一致性,因为如果我们开始将差距应用到flexbox容器上,这将是一个巨大的问题,并且它在浏览器的较新实现中有效,而在规范的较旧实现中则无法测试支持性。

我不是在寻找JavaScript解决方案。

html css firefox css3 flexbox

8
推荐指数
1
解决办法
496
查看次数

选择单选按钮时更改单选按钮标签的颜色?

当选择单选按钮时,有没有办法为单选按钮的颜色变化设置标签?

我希望标签与hover状态上的绿色相同,但我似乎无法弄清楚如何实现这一目标?

label.btn span {
  font-size: 16px;
}
i.fa {
  font-size: 24px;
}
i.fa.fa-dot-circle-o {
  font-size: 24px;
}
label input[type="radio"] {
  color: #c8c8c8;
  display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
  color: #78a025;
  display: inline;
  font-size: 24px;
}
label:hover input[type="radio"] ~ i.fa {
  color: #78A025;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
  color: #c8c8c8;
  display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
  display: …
Run Code Online (Sandbox Code Playgroud)

html css label css-selectors radio-button

7
推荐指数
1
解决办法
6510
查看次数

Flex盒最后一个项目占据容器的整个宽度.我该如何解决这个问题?

最后一行采用全宽,但我希望最后一行具有与所有其他项相同的宽度.我附上了一个截图,说明了我的问题.

使用flexbox是否可行,或者我必须使用简单的CSS来满足我的要求?或者我应该使用显示表和表格单元属性?

提前致谢!

在此输入图像描述

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  width: 1170px
}

.listingResult {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  flex-wrap: …
Run Code Online (Sandbox Code Playgroud)

html css list css3 flexbox

7
推荐指数
1
解决办法
2822
查看次数

如何在表格顶部设置表格标题?

我试图在表格结构中设置日历,但我不知道如何在表格顶部设置标题。

\n\n

我也无法更改表结构。我希望它看起来像下面这样:在此输入图像描述

\n\n

\r\n
\r\n
.calendar_wrap table {\r\n    width: 100%;\r\n}\r\n.calendar_wrap #wp-calendar thead th {\r\n    font-weight: 500;\r\n    color: #45515a;\r\n    font-size: 20px;\r\n    line-height: 28px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td {\r\n    font-weight: 400;\r\n    font-size: 24px;\r\n    line-height: 36px;\r\n    color: #5b666f;\r\n}\r\n.calendar_wrap #wp-calendar tfoot td a {\r\n    color: #3d9596;\r\n    font-weight: 500;\r\n    margin-top: 10px;\r\n    display: inline-block;\r\n    font-size: 22px;\r\n    line-height: 32px;\r\n}\r\n.calendar_wrap #wp-calendar tbody td a {\r\n    color: #EF9950;\r\n}\r\n.calender-box {\r\n    padding: 15px;\r\n    border: 1px solid #d4d9dd;\r\n    border-radius: 8px;\r\n}\r\ncaption {\r\n    font-size: 30px;\r\n    line-height: 36px;\r\n    color: #007ab0;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" …
Run Code Online (Sandbox Code Playgroud)

html css calendar html-table css-tables

7
推荐指数
1
解决办法
1万
查看次数

Chrome通过自定义样式为文本输入添加了意外的填充

简而言之,这个小提琴在Firefox上运行正常,但在Chrome上却没有.

输入与选择具有相同的样式,应该是相同的高度,但它不在Chrome上,我该如何解决这个问题?

经过进一步检查,它似乎与溢出属性有关,不知道为什么

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.my-custom-forms {
    font-family: 'Open Sans',serif;
}
select.my-custom-forms, input.my-custom-forms{
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}
Run Code Online (Sandbox Code Playgroud)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我使用Bootstrap作为准系统,但不确定它是否与问题有关.

html css css3 twitter-bootstrap bootstrap-4

7
推荐指数
1
解决办法
240
查看次数