使标尺刻度上没有空格左右

Question

如您所见，标尺比例和进度条不是从同一点开始的。此外，即使进度为80％，它也不会以“4”和“4”结束。马克，它结束了一点。但我希望进度条从0开始到10结束。如何使比例尺符合进度条？

＆＃13;

＆＃13;

html, body {
			padding: 0;
			margin: 0;
		}

		#progressbar {
			position: absolute;
			margin: 0;
			padding: 0;
			width: 96%;
			left: 2%;
			right: 2%;
			height: 20px;
		}

		#progress {
			width: 80%;
			height: 20px;
			background-color: #93CCEA;
		}


		table {
			position: absolute;
			width: 96%;
			left: 2%;
			right: 20%;

			border-collapse: collapse;
 			border-spacing: 0;

			border: 0;
			margin: 0;
			padding: 0;
		}

		tr, td {
			border: 0;
			margin: 0;
			padding: 0;
		}

＆＃13;

<div id="progressbar">
		<div id="progress"></div>
	</div>

	<table style='font-family: monospace; font-size: 16px;' cellspacing="0">
		<tr>
			<td>| </td>
			<td> | </td>
			<td> | </td>
			<td> | </td>
			<td> | </td>
			<td width="1%"> | </td>
		</tr>

		<tr>
			<td> 0 </td>
			<td> 2 </td>
			<td> 4 </td>
			<td> 6 </td>
			<td> 8 </td>
			<td width="1%"> 10 </td>
		</tr>
	</table>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/ogyyt544/4/

Answer 1

你可以用更少的代码做同样的事情：

＆＃13;

＆＃13;

public List<Pair<String, String>> getContacts(String name) {

    List<Pair<String, String>> results = new ArrayList<>();

    String[] projection = new String[] { Phone.CONTACT_ID, Phone.DISPLAY_NAME, Phone.NUMBER };
    String selection = Phone.DISPLAY_NAME + " LIKE '%" + name + "%'";
    Cursor cur = getContentResolver().query(Phone.CONTENT_URI, projection, selection, null, Phone.DISPLAY_NAME);
    while (cur.moveToNext()) {
        long contactId = cur.getLong(0);
        String name = cur.getString(1);
        String phone = cur.getString(2);

        Log.d("Contacts", "found: " + contactId + ", " + name + ", " + phone);

        results.add(Pair.create(name, phone));
    }
    cur.close();
}

＆＃13;

.progress {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.progress > span {
  width:10px;
}
.progress > div {
  border-right:2px solid;
  box-sizing:border-box;
  background:
  repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 20%),
  linear-gradient(#93CCEA,#93CCEA)1px 0/var(--p,50%) 100% no-repeat;
  height:30px;
  flex-basis:100%;
  margin:0 5px;
}

＆＃13;

＆＃13;

＆＃13;