语义ui构建如何将此项目组合在一起
语义ui构建如何将此项目组合在一起
提问于 2018-07-18 08:01:14
好的，所以附加的是一个元素的图片，我想用语义ui构建，但在花了几个小时试图弄清楚它之后，我就是不能让它工作。
有什么想法吗？在……里面
JSFiddle将是我正在寻找的答案。
<div class='items'>
<div class='item'>
<div class='ui buttons'>
<button class='ui labeled button'>
<a class='ui basic label'>File name</a>
<div class='ui progress bottom attached'>
<div class='bar'></div>
</div>
</button>
<button class='ui basic icon button'>
<i class='sync icon'></i>
</button>
</div>
</div>
</div>
<div style='border: 2px red solid; width: auto; padding: 0px;'>
<div style='display: inline-block;'>
<p>Filename</p>
<progress max=100 value=20></progress>
</div>
<div style='display: inline-block; vertical-align: top;' class='ui basic icon button'>
<i class='ui icon sync'></i>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-18 08:46:23
首先，在button中插入div在语义上是错误的，因此应该包含短语内容，请参阅HTML button element和HTML Phrasing content。您将需要删除<button class='ui labeled button'>中的div，或者采用不同的方法。
您可以使用flexbox获得所需的结果，请参阅：https://www.w3schools.com/css/css3_flexbox.asp
或者更好的方法是应用语义ui网格：https://semantic-ui.com/collections/grid.html
.progress-wrapper {
display: flex;
}
.progress-wrapper .ui.progress{
margin-bottom: 0 !Important;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css">
<div class='items'>
<div class='item'>
<div class="progress-wrapper">
<div class="progress-wrap">
<a class='ui basic label'>File name</a>
<div class='ui progress'>
<div class='bar' style="width: 12%;">
<div class="progress">12%</div>
</div>
</div>
</div>
<button class='ui basic icon button'>
<i class='sync icon'></i>
</button>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51391730
复制相关文章
相似问题
腾讯云开发者
