我有一个显示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标记问题,它在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)
这里似乎有什么问题?
我正在尝试创建一个包含标题和 2x2 CSS 网格的 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)我正在编码一个包含多个页面的网站。一个页面ComponentA,具有一个子组件,该子组件返回带有标题和段落的部分。
ComponentA传递数据中的数组作为对子项的支持。在孩子内部,一个map函数返回正确的段落。现在缺少的标题,你会怎么做传递title1到paragraph1,title2来paragraph2等?
组分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) 当在材质 UI 中单击第二个手风琴时,我想删除额外的空间。我看到当我们点击第二个手风琴时,它向下移动,但第一个手风琴和第二个手风琴之间有一个间隙。当第二个手风琴打开时,我们可以消除那个额外的间隙吗?
这是代码和框的链接。 https://codesandbox.io/s/yp9lmvwo1x
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解决方案。
当选择单选按钮时,有没有办法为单选按钮的颜色变化设置标签?
我希望标签与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)最后一行采用全宽,但我希望最后一行具有与所有其他项相同的宽度.我附上了一个截图,说明了我的问题.
使用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)我试图在表格结构中设置日历,但我不知道如何在表格顶部设置标题。
\n\n\n\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)简而言之,这个小提琴在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作为准系统,但不确定它是否与问题有关.
css ×8
html ×8
css3 ×4
flexbox ×4
firefox ×2
javascript ×2
reactjs ×2
arrays ×1
bootstrap-4 ×1
calendar ×1
css-grid ×1
css-tables ×1
html-table ×1
image ×1
label ×1
list ×1
material-ui ×1
radio-button ×1