CSS で <li> を <ul> の下の境界線に揃えるにはどうすればよいですか? _html/css

CSS で

を

の下の境界線に揃えるにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:18:49

オリジナル

1591 人が閲覧しました

css html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>UL与LI对齐</title><style type="text/css">ul.menu{	font-size:18px;	list-style-type:none;	margin:0;	margin-left:20px;	padding:0;	float:left;}ul.menu li{	float:left;	width:100px;	line-height:24px;	border:#CCC 2px solid;	border-bottom-color:#FFF;}ul.menu li.selected{	font-weight:bold;	float:left;	width:120px;	line-height:30px;	border:#CCC 2px solid;	border-bottom-color:#FFF;}ul.menu li:hover{	background-color:#0CF;}</style></head><body><ul class="menu">	<li class="selected">NO.1</li>    <li>NO.2</li>    <li>NO.3</li></ul></body></html>

ログイン後にコピー

表示状況:

すべての

gt;タグを

ディスカッションに返信（解決策）

ul.menu li {float: left;width: 100px;line-height: 24px;border: #CCC 2px solid;border-bottom: none;vertical-align: bottom;height: 25px;}

ログイン後にコピー

CSS code?123456789ul.menu li {float: left;width : 100px;line-height: 24px;border: #CCC 2px Solid;border-bottom: none;vertical-align:bottom;height: 25px;}
試してみてください
height: 25px; 自分で調整できます
…
まだいいえ...私の目的は、選択されている項目のリを大きく表示し、選択していることを強調することです。
したがって、まだタブ付きスタイルなので、すべての

の下の部分を揃える必要があります...

あなたの要求は矛盾しています。
lz の設定に従って、ul と li は両方ともフローティングになり、選択した li のスタイルを変更したい場合は、その結果、行の高さも 6px 増加します。このうちの ul の高さが拡張され、他の li の一部が解放されます。タブ効果については、このようにフォントを変更する必要はありません。現在のオプションを強調表示するために、ベベル効果（左上の境界線、右下の境界線を設定することによって）などを設定できます。

あなたのニーズは矛盾しています。
lz の設定に従って、ul と li は両方ともフローティングになり、選択した li のスタイルを変更したい場合は、その結果、行の高さも 6px 増加します。このうちの ul の高さが拡張され、他の li の一部が解放されます。タブ効果については、このようにフォントを変更する必要はありません。現在のオプションを強調表示するために、ベベル効果（左上の境界線、右下の境界線を設定することによって）などを設定できます。
境界線を通して強調表示できることは知っていますが、ここでは主に、高低の異なる効果を作成したい場合にどうすればよいかを知りたいです...
UL が引き伸ばされていることを知っているからこそ、私はそれを望んでいますli を ul の下の境界線に揃える方法を知るには……

これは主にvertical-align:bottomによって実現されます
ただし、liをフローティングした後は、vertical-align:bottomは機能しません
liのfloatを削除した後は、場合は、代わりに display:inline-block を使用し、vertical-align:bottom を使用できます。
このスタイルを試してください:
rreee

ただ、自分で調整できると言っているだけです。 ul.menu li 追加するこの属性は、非表示にするだけではありません。次に、必ず line-height: の値を増やしてください。どのくらい増やしたいかは自分で試してみてください。