初心者は助けを求め、同じ直線上に2つの三角形を求めます。間違った場所を見つけた。(閲覧終了)

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 21:38:51

<!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>無題文書</title>
<style type="text/css">
*{padding:0px; マージン:0px; }
#box{width:200px; 高さ:200ピクセル; margin-right:auto; margin-left:auto; テキスト-align:Center; }
#box a, #box a:visited {text-decoration: noe; カラー:#333; display:block; }
#box a:hover {color: #F00; }
#box a:hover span{ display:block; 位置:絶対; 幅:0; 身長:0; ボーダー:ソリッド8ピクセル #FFFFFF; }
#box a:hover span.z{ border-left-color:#F00; }
#box a:hover span.y{ border-right-color:#FF0000; }
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>dsad <span class="y"></span></a>
</div>

</body>
</html>

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 23:20:12

admin 2014年12月3日 23:17に投稿
君の三角形が何なのか分からない

三角形はスパンの境界線で押し出されています。先生の標準コードを出しましょう
[mw_shl_code=html、true]
<! 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>

         <style>

#menu { /*メニューレイヤーを設定し*/
font-family:Arial;                               /*フォント*/
font-size:16px;                               /*フォントサイズ*/
幅:140px;                               /*幅*/
マージン:0 オート;                               /*メニュー項目と横向きの間は0.5em*/
ボーダー:ソリッド 1px #ccc;                      /*灰色の細い縁*/
}

#menu、#menu:訪問{
  テキスト装飾:なし;                      /*テキストに下線が引かれていません*/
  テキスト-align:Center;                               /*テキストは水平中央に配置されて揃っています*/
  カラー:#c00;                                        /*赤いテキスト*/
  display:block;                               /*ブロックレベル要素に設定*/
  パッド数:4ピクセル;                                     /*余白*/
  背景色:#fff;                      /*背景色*/
  border:solid 1px #fff;                      /*ジャンプを防ぐために背景色と同じ枠を使います*/
  位置:相対的;                               /*相対位置を用いる*/
  幅:130px;
  }

#menu span {
  display:なし;
}

#menu a:hover {
  border-color:#c00;                               /*国境の色は赤*/
}

#menu a:hover span {
      display:block;             /*ブロックレベル要素に設定*/
  位置:絶対;                               /*絶対位置を使った*/
  身長:0;                                        /*身長は0*/
  幅:0;                                        /*0*幅は0*/
  border:solid 8px #fff;                      /*デフォルトのボーダースタイルを設定する*/
  トップ:4px;                                     /*垂直位置*/
  オーバーフロー:隠し;
  }

  #menu a:hover span.left {
  border-left-color:#c00;
  左:8px;
  }

  #menu a:hover span.right {
  border-right-color:#c00;
  右:8ピクセル;
  }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>arrow menu</title></head>

<body>
<div id="menu">
   <a href="#">
            <span class="left"></span>メニュー項目1<span class="right"></span> </a>
   <a href="#">
            <span class="left"></span>メニュー項目2</a>
   <a href="#">
                        <span class="left"></span>メニュー項目3<span class="right"></span> </a>
   <a href="#">
                     <span class="left"></span> メニュー項目 4<span class="right"></span> </a>
   <a href="#">
                        <span class="left"></span>メニュー項目5</a> </div>
</body>
</html>
[/mw_shl_code]

管理者 · 掲載地 2014/12/03 23:17:49

明らかにあなたは私にヒントを出していませんでした。2014年12月3日 22:38に投稿
三角形は内容を遮りますが、間隔の調整方法を決めるだけで、スペースを調整すると完全に位置調整になります

君の三角形が何なのか分からない
[mw_shl_code=html、true]
<!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>無題文書</title>
<style type="text/css">
*{padding:0px; マージン:0px; }
#box a{border: 1px solid #666; }
#box{width:250px; 高さ:200ピクセル; margin-right:auto; margin-left:auto; テキスト-align:Center; ボーダー:実色 1px #999999; }
#box a, #box a:visited {text-decoration: noe; カラー:#333; display:block; }
#box a:hover span{ position:relative; border:solid 1px #FFFFFF; パディング左:20px}
#box a:hover{ border:solid 2px #FF0000}
#box a:hover span.z{ border-left-color:#F00; }
#box a:hover span.y{ border-right-color:#FF0000; }
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>これは最初の<spanクラス="y"></span></a>
<a href="#"><span class="z"></span>これは2番目の <span クラス="y"です></span></a>
<a href="#"><span class="z"></span>これは3番目の<span class="y"です></span></a>
<a href="#"><span class="z"></span>これは4番目の<spanクラス="y"です></span></a>
<A href="#"><span class="z"></span>これは5番目の <span class="y"です></span></a>
<a href="#"><span class="z"></span>これは6番目の <span クラス="y"です></span></a>
</div>

</body>
</html>
[/mw_shl_code]

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 23:17:07

[mw_shl_code=html,,true]<!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>無題文書</title>
<style type="text/css">
*{padding:0px; マージン:0px; }
#box a{border: 1px solid #666; }
#box{width:200px; 高さ:200ピクセル; margin-right:auto; margin-left:auto; テキスト-align:Center; ボーダー:実色 1px #999999; }
#box a, #box a:visited {text-decoration: noe; カラー:#333; display:block; }
#box a:hover span{ position:absolute; 幅:0; 身長:0; ボーダー:ソリッド8ピクセル #FFFFFF; }
#box a:hover{ border:solid 2px #FF0000}
#box a:hover span.z{ border-left-color:#F00; }
#box a:hover span.y{ border-right-color:#FF0000; }
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>これは最初の<spanクラス="y"></span></a>
<a href="#"><span class="z"></span>これは2番目の <span クラス="y"です></span></a>
<a href="#"><span class="z"></span>これは3番目の<span class="y"です></span></a>
<a href="#"><span class="z"></span>これは4番目の<spanクラス="y"です></span></a>
<A href="#"><span class="z"></span>これは5番目の <span class="y"です></span></a>
<a href="#"><span class="z"></span>これは6番目の <span クラス="y"です></span></a>
</div>

</body>
</html>
[/mw_shl_code]

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 21:40:28

管理者 · 掲載地 2014/12/03 22:12:27

Put:display:block; 削除すれば問題は解決します!
正しいコード:

[mw_shl_code=html、true]<!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>無題文書</title>
<style type="text/css">
*{padding:0px; マージン:0px; }
#box{width:200px; 高さ:200ピクセル; margin-right:auto; margin-left:auto; テキスト-align:Center; }
#box a, #box a:visited {text-decoration: noe; カラー:#333; display:block; }
#box a:hover {color: #F00; }
#box a:hover span{ position:absolute; 幅:0; 身長:0; ボーダー:ソリッド8ピクセル #FFFFFF; }
#box a:hover span.z{ border-left-color:#F00; }
#box a:hover span.y{ border-right-color:#FF0000; }
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>dsad <span class="y"></span></a>
</div>

</body>
</html>
[/mw_shl_code]

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 22:15:06

管理者が2014年12月3日 22:12に投稿
Put:display:block; 削除すれば問題は解決します!
正しいコード:

素晴らしい！

スズメバチ · 掲載地 2014/12/03 22:16:26

display:block 此元素将显示为块级元素，此元素前后会带有换行符。

そのため、もう一方の三角形は自動的に線を巻きつけます

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 22:17:56

Wasp 2014-12-3 22:16 投稿
display:block 此元素将显示为块级元素，此元素前后会带有换行符。

そのため、もう一方の三角形は自動的に線を巻きつけます

彼らは皆強力な人物であり、将来問題があればここに掲載します。皆さん、ご助力ありがとうございます

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 22:18:04

ありがとうございました

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 22:36:11

再び疑問が浮かび上がる。 [mw_shl_code=html、true]<!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>無題文書</title>
<style type="text/css">
*{padding:0px; マージン:0px; }
#box{width:200px; 高さ:200ピクセル; margin-right:auto; margin-left:auto; テキスト-align:Center; }
#box a, #box a:visited {text-decoration: noe; カラー:#333; display:block; }
#box a:hover {color: #F00; ボーダー:固い2ピクセル #FF0000; }
#box a:hover span{ position:absolute; 幅:0; 身長:0; ボーダー:ソリッド8ピクセル #FFFFFF; }
#box a:hover span.z{ border-left-color:#F00; }
#box a:hover span.y{ border-right-color:#FF0000; }
</style>
</head>
<body>
<div id=box>
<a href="#"><span class="z"></span>1<span class="y"></span></a>
<a href="#"><span class="z"></span>2<span class="y"></span></a>
<a href="#"><span class="z"></span>3<span class="y"></span></a>
<a href="#"><span class="z"></span>4<span class="y"></span></a>
<a href="#"><span class="z"></span>5<span class="y"></span></a>
<a href="#"><span class="z"></span>6<span class="y"></span></a>
</div>

</body>
[/</html>mw_shl_code]

君が僕にほのめかしてないのは知ってる · 掲載地 2014/12/03 22:38:34

三角形は内容を遮りますが、間隔の調整方法を決めるだけで、スペースを調整すると完全に位置調整になります

Delver_Si · 掲載地 2014/12/03 22:53:13

明らかにあなたは私にヒントを出していませんでした。2014年12月3日 22:38に投稿
三角形は内容を遮りますが、間隔の調整方法を決めるだけで、スペースを調整すると完全に位置調整になります

助けにはならない

[CSS/DIV] 初心者は助けを求め、同じ直線上に2つの三角形を求めます。間違った場所を見つけた。(閲覧終了)

閲覧したセクション

[CSS/DIV] 初心者は助けを求め、同じ直線上に2つの三角形を求めます。 間違った場所を見つけた。(閲覧終了)

閲覧したセクション

[CSS/DIV] 初心者は助けを求め、同じ直線上に2つの三角形を求めます。間違った場所を見つけた。(閲覧終了)