Question

圆圈CSS不一致，因为数字的位数会发生变化。如果值是一位数，则圆形变为蛋形。当三位数时，形状变形。

＆＃13;

.my-progress-value {
  background-color: deepskyblue;
  color: white;
  border-radius: 100%;
  font-size: 7pt;
  padding: 8px 5px 8px 5px;
  position: absolute;
  margin-top: -11px;
}
.my-progress-container {
  width: 200px;
  padding-top: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-progress {
  background-color: deepskyblue;
  width: 60%;
  height: 8px;
  text-align: right;
}

＆＃13;

<div class="col-md-3" id="1">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">0</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="2">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">49</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="3">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">100</span>
    </div>
  </div>
</div>

＆＃13;

这是Fiddle

Answer 1

在width类中设置相同的.my-progress-value和.my-progress-value { background-color: deepskyblue; color: white; border-radius: 100%; font-size: 7pt; padding: 8px 5px 8px 5px; position: absolute; margin-top: -11px; width:50px; //add this height:50px; //add this }。

class MainActivity extends AppCompatActivity {

//make your Adapter global
private SimpleAdapter adapter;
ArrayList<HashMap<String, String>> aList9;

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    add8();

    btn_aditional_card.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            // on button click you can add a view to the listview if you want
            // if you don't want this just comment out the following line
            // i still don't understand what you want to do with this button
            alist9.add(...);
            // if you add stuff in the array list then notify the adapter
            // it will update the view
            adapter.notifyDataSetChanged();
        }
    });

}

public void add8() {
    // initialize your ArrayList and listview
    //populate them
    for(int i = 0; i < 8; i++) {
        // do your stuff.
        // populate the list
    }

    // initialize your adapter as before
    adapter = new SimpleAdapter(....);
    listview.setadapter(adapter);
    adapter.notifyDataSetChanged();

    list1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            // delete the items like this
            // check if size is greater than 0 and then remove
           aList9.remove(aList9.size() - 1);
           adapter.notifyDataSetChanged();
       }
    });


}

}

Answer 2

您需要添加修复宽度才能达到您的目的，因为它的计算宽度是自动尝试在{my-progress-value“类上width: 30px; 我希望这能解决你的问题

检查链接 http://jsfiddle.net/e8fqLdfy/3/

圆形CSS需要保持一致，无论它内部是否包含1位，2位或3位数字

2 个答案: