1. ホーム
  2. 質問と答え
  3. CSS - リンクが正しく整列していません

CSS - リンクが正しく整列していません

2017-01-05 21 views
0

私はウェブデザイナーではなくバックエンド開発者です。しかし、フロントエンドのデザイナーは、私が直面している問題を私に残しました。私は右にログインと登録リンクとナビゲーションリンクを持っています。これらのリンクを整列して同じナビゲーションバーに表示します。現時点では、私のリンクは歪んでいます。それらは私が扱っているページの中央に現れます。私は、ログイン/登録リンクをナビゲーションバーの左側に揃えたいと思っています。また、メインナビゲーション内に正しいナビゲーションtpが必要です。これらのことのどちらも起こっていません（スクリーンショットが提供されています）。一番上のナビゲーションバーの左に揃えるためのユーザーリンクと他のリンクを右に置くにはどうすればいいですか？ここでCSS - リンクが正しく整列していません

は私のスクリーンショットへのリンクです：https://s30.postimg.org/tlkvrcv5t/Screen_Shot_2017_01_05_at_11_11_55_AM.png

、ここでは私のコードです：

app.blade.php：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="{!! asset('css/stylesheet.css') !!}" /> 
</head> 

<body> 
<div class="mainheader"> 
    <div class="subcontainer"> 
     <div class="subcontainer-left"> 
      <div class="subcontainter-title">Cryptoflip</div> 

       @if (Auth::guest()) 
       <div class="subcontainer-button"> 
        <a href="/login">Login</a> 
       </div> 
      <div class="subcontainer-button"> 

       <a href="/register">Register</a> 
      </div> 
        @else 
        <div class="subcontainer-button"> 
       <a href="/user/{{$user->name}}"Your Profile</a> 
        </div> 
        <div class="subcontainer-button"> 
         <a href="/logout">Logout</a> 
        </div> 
        @endif 

     </div> 
    </div> 
     <div class="subcontainer-right noselect"> 
      <div class="subcontainer-button"> 
       <a href="support.html">Support</a> 
      </div> 
      <div class="subcontainer-button"> 
       <a>Provably Fair</a> 
      </div> 
      <div class="subcontainer-button"> 
       <a>Dice</a> 
      </div> 
      <div class="subcontainer-button bt-active"> 
       <a href="main.html">Coinflip</a> 
      </div> 
     </div> 
    </div> 
    <!-- Decoration --> 
    <!--<div style="height: 10px; width: 200px; margin: auto; margin-top: -50px; background-color: gold"></div>--> 
</div> 
<div class="maincontainer"> 
    @yield('content') 

</div> 
</body> 
</html>

stylesheet.css。

@font-face { 
    font-family: NexaBold; 
    src: url(NexaBold.otf); } 

@font-face { 
    font-family: NexaLight; 
    src: url(NexaLight.otf); } 

@font-face { 
    font-family: OpenSans; 
    src: url(OpenSans-Regular.ttf); } 

body { 
    margin: 0; 
    background-color: #ecf0f1; } 

.mainheader { 
    height: 75px; 
    font-family: NexaBold; 
    font-size: 28px; 
    line-height: 75px; 
    text-align: center; 
    vertical-align: middle; 
    background-color: #dce0e1; } 

.menu { 
    height: 40px; } 

.subcontainer-left { 
    height: 75px; 
    float: left; } 

.subcontainer { 
    height: 75px; 
    margin: auto; } 

.subcontainer-right { 
    height: 75px; 
    width: auto; 
    float: right; } 

.subcontainer-button { 
    height: 75px; 
    width: 100px; 
    float: right; 
    padding-left: 12px; 
    padding-right: 12px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 75px; 
    font-family: OpenSans; 
    font-size: 14px; } 

.subcontainer-button a { 
    text-decoration: none; 
    color: black; } 

.subcontainer-button a:visited { 
    text-decoration: none; 
    color: black; } 

.subcontainer-button a:active { 
    color: black; } 

.subcontainer-button a:hover { 
    border-bottom: 3px solid gray; 
    cursor: pointer; } 

.subcontainer-title { 
    height: 75px; 

    float: left; 
    padding-left: 12px; 
    padding-right: 12px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 75px; 
    font-family: OpenSans; 
    font-size: 14px; } 

.bt-active a { 
    border-bottom: 3px solid gold; } 

.noselect { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; } 

.maincontainer { 
    height: 700px; } 

.textheader { 
    height: 180px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 180px; 
    font-family: NexaLight; 
    font-size: 48px; } 

.ongoing-header { 
    width: 700px; 
    margin: auto; 
    height: 70px; 
    border-top-left-radius: 6px; 
    border-top-right-radius: 6px; 
    background-color: #bcc0c1; } 

.subheader { 
    height: 70px; 
    width: 260px; 
    font-family: OpenSans; 
    font-weight: bold; 
    font-size: 22px; 
    text-align: center; 
    line-height: 70px; 
    vertical-align: middle; 
    float: left; } 

.subheader-menu { 
    height: 36px; 
    background-color: #ccd0d1; } 

.button { 
    height: 36px; 
    width: auto; 
    margin: auto; 
    padding-left: 12px; 
    padding-right: 12px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 36px; 
    font-family: OpenSans; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: 0.3s; } 

.button:hover { 
    background-color: #ecf0f1; } 

.subheader-right { 
    float: right; 
    padding-top: 16px; 
    width: 260px; 
    margin: auto; 
    margin-right: 24px; } 

.ongoing-container { 
    width: 700px; 
    margin: auto; } 

.ongoing-game { 
    height: 40px; 
    line-height: 40px; 
    vertical-align: middle; 
    text-align: center; 
    cursor: pointer; 
    font-family: OpenSans; 
    transition: 0.3s; } 

.ongoing-game:nth-child(even):hover { 
    background-color: #f3f9fa; } 

.ongoing-game:nth-child(odd):hover { 
    background-color: #f3f9fa; } 

.ongoing-game:nth-child(even) { 
    background-color: #d3d9da; } 

.ongoing-game:nth-child(odd) { 
    background-color: #dce0e1; } 

.iconholder { 
    height: 20px; 
    width: 20px; 
    float: left; 
    margin-top: 4px; 
    margin-right: 4px; } 

#username { 
    float: left; 
    height: 40px; 
    width: 220px; 
    text-align: left; 
    padding-left: 24px; } 

#btcamount { 
    float: left; 
    height: 40px; 
    width: 220px; 
    text-align: right; 
    padding-right: 24px; } 

#ongoing { 
    height: 40px; 
    width: 212px; 
    float: left; } 

.bitcoinlogo { 
    height: 15px; } 

.helpcontainer { 
    height: 600px; 
    width: 500px; 
    margin: auto; 
    font-family: OpenSans; } 

.helpform { 
    margin-top: 20px; 
    height: 400px; 
    font-size: 12px; } 

.helpform textarea { 
    resize: none; 
    font-family: OpenSans; } 

#issuetext { 
    height: 100px; 
    width: 480px; } 

#emailtext { 
    height: 18px; 
    width: 220px; 
    font-family: OpenSans; } 

.submitbutton { 
    height: 40px; 
    width: 180px; 
    float: none; 
    margin: auto; 
    margin-top: 20px; 
    border: 1px solid gray; 
    background-color: white; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40px; 
    font-size: 14px; 
    cursor: pointer; 
    border-radius: 3px; 
    transition: 0.2s background-color; } 

.submitbutton:hover { 
    background-color: lightgrey; }

/*＃sourceMappingURL = stylesheet.css.map */

EDIT：更新されたコード。

出典

2017-01-05 Tom Morison

答えて

0

.subcontainer-leftの幅を取り除く。次に幅を.subcontainer-buttonに指定します。

あなたはdiv要素、例えば「サブコンテナタイトル」内側「Cryptoflip」を配置する必要が 
.subcontainer-left { 
    height: 75px; 
    /* width: 200px; */ 
    float: left; 
} 

.subcontainer-button { 
    height: 75px; 
    width: 100px; 
    ... 
}

出典

2017-01-05 19:24:28

+0

大丈夫です。私は上記の両方の答えを組み合わせ、私のディスプレイは次のようになりました（https://s28.postimg.org/vk4grts3h/Screen_Shot_2017_01_05_at_3_33_32_PM.png）。私はcryptoflipテキストが同じ行の下のリンクと整列する必要があります。これまでの助けてくれてありがとう、私はそれのハングアップを取得し始めた。私は元の質問のソースコードを更新しました。 –

+0

私がレジスタとlonのリンクの上の答えの提案を正しく取り除くなら、正しく整列します。しかし、右のナビゲーションバーは全く上がらない。次の行に表示されます。 –

+0

新しいスクリーンショットを表示したり、問題のマークアップを更新したり、どこかでオンラインでこれをスローすることはできますか？ –

0

：

<div class="subcontainer"> 
     <div class="subcontainer-left"> 
      <div class="subcontainer-title">Cryptoflip</div> 
       <div class="subcontainer-button"> 
        <a href="/login">Login</a> 
       </div> 
      <div class="subcontainer-button"> 

       <a href="/register">Register</a> 
      </div> 

     </div> 
    </div>

そして、それは「.subcontainerボタン」をコピーするためのスタイルを追加し、コンテンツを変更

.subcontainer-title { 
    height: 75px; 
    width: auto; 
    float: left; 

    padding-left: 12px; 
    padding-right: 12px; 

    text-align: center; 
    vertical-align: middle; 
    line-height: 75px; 

    font-family: OpenSans; 
    font-size: 14px; 
}

そして、サブコンテナ左の幅変更：

をあなたはそれが（：最初の場所で左フロート）を見てみたいものと一致します210 
.subcontainer-left { 
    height: 75px; 
    width: 400px; 
    float: left; 
}

出典

2017-01-05 19:39:50 MarioZ

関連する問題

 関連する問題