Question

我正在尝试创建一个项目，其中包含一个人的推文列表。在加载推文的同时，我想在拼贴的底部显示进度条。换句话说，我想创建一个类似于：

的图块

+--------------+
|              |
|    [logo]    |
|              |
||||||||       |
+--------------+

连续的|项代表进度条。我希望进度条占据底部的全部，并与瓷砖的底部边框齐平。但是，此时，我的图块呈现如下：

+--------------+
|              |
|  [logo]      |
|              |
|  ||||||||||  |
+--------------+

徽标左对齐而不是居中。进度条居中并占据整个宽度。但是，仍然有一些填充，我不想要。当我查看此处包含的CSS时，我无法弄清楚错误。

<style type="text/css">
  .choice {
    border: solid 1px #2d2d2d;
    color: #2d2d2d;
    padding: 16px 32px;
    margin-right: 16px;
    margin-left: 16px;
    clear:both;
    display:inline-block;
    position:relative;
  }
</style>

<div class="choice">
  <div class="fa fa-twitter"></div>
  <progress class="tweet-progress mb-0" value="50" min="0" max="100"></progress>
</div>

我错过了什么？

Answer 1

CSS中的任何内容都不会影响您将Font Awesome图标加载到的<div>。没有任何迹象表明它是居中的或100％宽度。解决这个问题应该得到你期望的结果。

.choice {
    border: solid 1px #2d2d2d;
    color: #2d2d2d;
    padding: 16px 32px;
    margin-right: 16px;
    margin-left: 16px;
    clear:both;
    display:inline-block;
    position:relative;
  }
  
  .fa {
    width: 100%;
    text-align: center;
  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="choice">
  <div class="fa fa-twitter"></div>
  <progress class="tweet-progress mb-0" value="50" min="0" max="100"></progress>
</div>

Answer 2

填充来自选择，所以如果你删除它，给出选择设置的高度和宽度并绝对定位进度，你可以使它与底部齐平，而宽度：100％使它占用整个宽度的选择。

＆＃13;

.choice {
  border: solid 1px #2d2d2d;
    color: #2d2d2d;
    /* padding: 16px 32px; */
    margin-right: 16px;
    margin-left: 16px;
    clear: both;
    display: inline-block;
    position: relative;
    width: 130px;
    height: 35px;
  }
  
  .fa {
    width: 100%;
    text-align: center;
  }
  progress{
      width: 100%;
    position: absolute;
    bottom: -4px;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="choice">
  <div class="fa fa-twitter"></div>
  <progress class="tweet-progress mb-0" value="50" min="0" max="100"></progress>
</div>

＆＃13;

在Bootstrap中居中内容

2 个答案: