我有奇怪的间距问题.有数字和每个文本平行.并且在1,4,7和"每个"文本之间存在不同的间距.我们如何解决这个问题,或者无法修复.我没有使用任何间距和额外的CSS属性.
@import url('https://fonts.googleapis.com/css?family=Spectral');
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral');
.bigger {
font-size: 40px;
}
p {
font-family: 'Open Sans', sans-serif;
}<p>
<span class="bigger">81</span>
<small>each</small>
</p> <br>
<p>
<span class="bigger">84</span>
<small>each</small>
</p> <br>
<p>
<span class="bigger">87</span>
<small>each</small>
</p> <br>我试图为我的网站集成标记/自动完成功能.它通过选项文本进行处理.我几乎接近结果但仍然悬挂.
现在,当您尝试选择选项文本时,将显示相关文本.但现在我想通过选项值显示加德满都或相关选项文本搜索.
例如:当我们将搜索值a001时, 加德满都将出现并选择与a002相同,它将显示为pokhara
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true,
width: '100%',
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});.select2-container {
max-width: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>我认为在通过值搜索后我很接近并点击它会显示相关的id选项.但我只想要像pokhara kathmandu这样的选项文本而不是选择区域的ID.
我正在将Material-UI用于React项目。但是，我不确定如何全局应用主题。
在这里，我尝试了单个组件
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import CardCommon from '../../common/card/CardCommon';
import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
//const primary = red[500]; // #F44336
import { Paths } from '../../../Routes';
const theme = createMuiTheme({
palette: {
primary: { main: purple[500] }, // Purple and green play nicely together.
secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
},
});
那么如何在全局范围内更改原色和副色？
在多个幻灯片项目上是否有关于动画的任何功能？我在单张幻灯片上尝试过它,但没有在多个项目幻灯片上工作.
您可以使用JSFiddle或以下代码进行调试.
$('.loop-test').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
dots: true
});<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel loop-test">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>任何指针将不胜感激!
谢谢.
我试图让表内的表意味着嵌套表.现在它看起来像这个截图.但我需要从左边开始对齐.因为我在每一行都使用相同的计数列.你可以看到我试图得到这个输出.
提前致谢
.report-table {
border-collapse: collapse;
width: 100%;
font-family: Arial;
}
.report-table .col-name {
width: 150px;
}
.report-table .col-title {
width: 150px;
}
.report-table .col-carried {
width: 60px;
}
.report-table .col-earned {
width: 60px;
}
.report-table .col-used {
width: 60px;
}
.report-table .col-scheduled {
width: 60px;
}
.report-table .col-balance {
width: 60px;
}
.report-table .col-to-be {
width: 60px;
}
.report-table .col-available {
width: 60px;
}
.report-table .inner-table tr td{
border: 0;
}
.report-table.hr-table .inner-table {
background: none;
border: …我遇到了 Flexbox 的问题。我尝试了很多变体但还没有找到解决方案。
我需要子元素与父容器一起拉伸。
第一行的宽度还可以，但背景也应该根据内容拉伸。
关于第二行，背景拉伸很好，但它需要相等的宽度，并且我需要宽度取决于内容，例如自动宽度......
我需要它像在变体 3 中使用 , 时一样拉伸display: table。
.row {
display: flex;
justify-content: space-around;
margin: 20px;
color: #fff;
}
.row .col {
min-height: 40px;
background: #333;
padding: 10px;
}
.row-v2 {
flex-wrap: wrap;
}
.row-v2 .col {
flex: 1;
}
.row-table {
width: 100%;
display: table;
}
.col:nth-child(2) {
background: #666;
}
.row-table .col {
display: table-cell;
padding: 10px;
background: #333;
color: #fff;
}<h1>Variant 1</h1> …我是新手ReactJS,从头开始学习.我看到一些使用babel,有些是webpack配置以及一些使用纱线包管理器.所以你能告诉我哪个更适合做出反应.
我只是好奇配置reactJS环境哪个捆绑包或包管理器？
我有问题display: grid.我想要标题顶部和33%宽度侧边栏列和66%内容.而且我已经宣布了grid-area.你能帮助我吗？
.head {
grid-area: head;
background: tomato;
}
.side {
grid-area: side;
background: purple;
}
.content {
grid-area: content;
background: orange;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-areas:
"head head head"
"side" "content content"
}
.box {
padding: 20px;
height: 100px;
}<div class="wrapper">
<div class="box head">
</div>
<div class="box side">
</div>
<div class="box content">
</div>
</div>css ×6
html ×5
javascript ×4
css3 ×2
reactjs ×2
css-grid ×1
flexbox ×1
fonts ×1
html-table ×1
jquery ×1
material-ui ×1
owl-carousel ×1
react-native ×1
react-redux ×1
react-router ×1
select2 ×1
typography ×1