左から右にボーダーをつけることはできません

Question

私は自分のウェブサイトのボーダーを作ろうとしていますので、アイコンの左から右に囲まれています。私はこのようなものが欲しい： しかし私のために、それは動作しないように見え、これは同様のCSSを使用して結果です。 誰かが私が間違っていることを見つけるのを助けることができれば非常に高く評価されるでしょう。私のコードは以下の通りです。

CSS： https://hastebin.com/umibawufuw.css

HTML： https://hastebin.com/wogacayoko.html

私は任意の助けが大好きです。

Answer 1

あなたはこの

#logo{ 
 
    background: #3cf; 
 
    min-height: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 
.border{ 
 
    margin: 10px auto; 
 
    display: block; 
 
    min-height: 100px; 
 
    border-top: 2px solid gray; 
 
    border-bottom: 2px solid gray; 
 
    background:rgba(0,0,0,.1); 
 
} 
 
.buttons{ 
 
    width: 80%; 
 
    min-height: 100px; 
 
    line-height: 100px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.buttons .button{ 
 
    width: 20%; 
 
    min-height: 100px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background: red; 
 
    margin: 1% auto; 
 
}

<div id="main"> 
 
    <div id="layout"> 
 
    <div id="logo">LOGO IMG HERE</div> 
 
    <div class="border"> 
 
     <div class="buttons"> 
 
     <div class="button" id="forum">Block 1</div> 
 
     <div class="button" id="vote">Block 2</div> 
 
     <div class="button" id="store">Block 3</div> 
 
     <div class="button" id="bans">Block 4</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ノートのように試すことができます：あなたの必要性としてmargin、paddingとより多くのCSSプロパティを追加します。

Answer 2

Javascriptを使用すると、折り返しdiv要素の幅を画面の幅（具体的にはwindow.innerWidth）に設定し、境界線のスタイリングを適用し、メニューの余白をautoに設定します（つまりmargin ：auto;）次に、メニューのパディングトップとパディングを設定することで、折り返しdivの高さを調整することができます。