たぶんCSSの質問です。
phpでHTMLコードを作成して他人のブログに張ってもらおうと考えており、Wordpressで作った自分のブログでテストしています。
http://q.hatena.ne.jp/1429708544
の続きのようなものですが、今回はある事情でiFrameを使いません。
<a href="#" style="text-decoration:none;margin:0;padding:0;">i</a>
としますがiマークに下線が表示され、グレーの四角から少しはみ出しています。
画像左上のiマークの位置がずれているのを正常な位置（グレーの四角）に収めることと、iマークの下線を表示したくないのですが何かいい方法はありますか？
サンプルをアップしました。
http://neoregi.com/wp/?p=6
<p class="adtest-box">…</p>を含む部分が、PHPで作成したHTMLコードです。
よろしくお願いします。
ベストアンサー
-
a-kuma3
満足100pt
アンダーラインは、style.css の 1721 行目の .entry-content a に border-bottom を指定してるのが効いています。
位置がずれるのは、小文字の i は、フォントとして行の高さ方向に上に隙間があることが大きいのかな、と思います。
i を持っている A 要素に以下のスタイルを指定します。/* 下線 */ border-bottom: none; /* 位置 */ display: inline-block; position: absolute; width: 1em; height: 1.5em; top: -6px; left: 0;
高さ方向は、i の上に隙間があるので、大きめに高さを取って上に少しだけずらします。
A 要素は、それを囲んでいる DIV.adtest-link の幅と合わせておかないと、クリックできる場所が i の幅だけになっちゃう（狭いっ！）ので、inline-block にして幅を合わせてます。
＃ 位置合わせは、ちょっと無理矢理かな... -
a-kuma3その他の回答
-
すいんぐ
満足100pt
▼iの下線を消す
border-bottom:0 を記載すると良いです
【変更前】<a href="#" style="text-decoration:none;margin:0;padding:0;">i</a>
【変更後】
<a href="#" style="border-bottom:0;margin:0;padding:0;">i</a>
▼iを枠内に納める（グレー枠のサイズを広げて調整しました）
width: 1.5em;height: 1.5em;にするとよいです。
【変更前】<div class="adtest-link" style="width: 1em;height: 1em;background:#eee;text-align:center;position:absolute;top:0;left:0;">
【変更後】
<div class="adtest-link" style="width: 1.5em;height: 1.5em;background:#eee;text-align:center;position:absolute;top:0;left:0;">
-
この質問へのコメント
質問の情報
- 登録日時
- 2015-06-03 17:10:12
- 終了日時
- 2015-06-04 00:55:33
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
経団連が夫婦別姓（選択的）を提言しました。政府は、配偶者控除の廃止を志向しているようです。結婚制度を…
匿名質問者
3
2
-
オススメのシェイバー教えてください！ 以下の条件に近いシェイバーはあるのでしょうか。 1.髭が濃いため深…
Ryoya391
-
０５７０ で始まる電話番号は、キャリアなどとの間でカケ放題などの契約をしていても、そのサービスは受け…匿名質問者1
-
友人の解答と自身の解答で異なります。教えて頂けないでしょうか。 C社株式は，３年後に平均で1,000円にな…匿名質問者3
-
僕の親は苛立っています。 「俺はネットの天才なのに、なんで通報されたり、アカウント凍結されたりするん…匿名質問者3
4