8

<<必須スパンから先頭を削除して、上下に追加のスペースがないようにするにはどうすればよいですか。

フィールド行は、テキストサイズのデフォルトに基づいて特定の高さを占めますline-heightが、フォントサイズが大きいため、必須フィールドは高くなります。上下の余分な空白を取り除くにはどうすればよい<<ですか？

.fieldRow { /* for illustration only */
        border: solid 1px #f00;  
}
.mandatory {
        color: #f00;
	border: solid 1px #f00; /* for illustration only */
	font-size: 24px;
	line-height: 0;
	vertical-align: middle;
}
<div class="fieldRow">
  
	<label for="select">Some field</label>
	
	<select name="select">
		<option>Any</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>	
	
	<span class="mandatory">&laquo;</span>

</div>

4

5 に答える 5

10

取り外しvertical-align: middleた後、それは私にはよさそうだ。

.mandatory {
  color: #f00;
  font-size: 24px;
  line-height: 0;
}

デモ

于 2012-12-04T10:52:34.763 に答える
3

垂直整列を削除します

.mandatory {
    color: #f00;
    border: solid 1px #f00; /* for illustration only */
    font-size: 24px;
    line-height: 0 !important;
}​

デモ

于 2012-12-04T10:53:36.270 に答える
2

私はこれが古いことを知っていますが、私は同様の問題を抱えていて、別の解決策を思いつきました。

少しハッキーですが、テキストの周りにコンテナを配置し、オーバーフローを非表示にして高さを指定することができます。大きいフォントの下の余分なスペースは、含まれているdivによって切り捨てられます。あなたはそれを取り除くのではなく、あなたがそれを隠すのです。これは私にとってはうまくいきますが、あなたの状況ではうまくいかないかもしれません。

.container {
  overflow: hidden;
  height: 30px; /* Or whatever height is necessary to show the text */
}
<div class="container">
  <span class="mandatory">&laquo;</span>
</div>

于 2018-07-16T00:16:28.333 に答える
1

空白を追加したさまざまなスタイルを追加しました。つまり、font-size必須スパンのはコンテナとは異なります。

追加した境界線も、物事が実際よりも少し悪く見えるようにします。

このフィドルを参照してください。上記を削除すると、見栄えがよくなります。

改訂されたCSS：

.fieldRow {
  border: solid 1px #f00;
  font-size: 24px;
}

.mandatory {
  color: #f00;
  border: solid 1px #f00;
  border-top: 0;
  border-bottom: 0;
}
于 2012-12-04T10:54:53.883 に答える
1 
line-height: unset;

またはline-height：unset！important;

于 2021-04-13T20:30:18.923 に答える