ボタンを右側に配置するにはどうすればよいですか（CSS）

-2

現在のCSS：

background-color: white; 
width: 60%; 
border-radius: 5px; 
margin-top: 30px; 
margin-bottom: 0; 
margin-right: auto; 
margin-left: auto; 
position: relative;

出典

2017-05-17 ll9412

あなたのHTMLコードを教えてもらえますか？ –

あなたは何をしたいのか明確ではありません、フィドルを作って詳細を教えてください。 – codesayan

"divの現在のCSS"が、実際にこれまでに試したことはありますか？あなたはJSFiddleを提供できますか？ – Xariez

すぐ下にこの

<parent selector> { 
    position: relative; 
} 
button { 
    position: absolute; 
    left: 100%; 
    top: 5px; 
}

出典

2017-05-17 11:31:13

のCSSの下に使用し、あなたを手助けするためのサンプルコードです：

.parent { 
 
    position: relative; 
 
} 
 
button { 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 5px; 
 
}

<div class="parent"> 
 
<button>Button</button> 
 
</div>

出典

2017-05-17 11:32:34

これを確認してください。私はあなたのイメージのようなものを作ろうとしました。

body{background:green;} 
 
.super{ 
 
    background-color: white; 
 
width: 60%; 
 
border-radius: 5px; 
 
margin-top: 30px; 
 
margin-bottom: 0; 
 
margin-right: auto; 
 
margin-left: auto; 
 
position: relative;height:600px; 
 
} 
 
button{background:red; position: absolute; 
 
    right: -79px; 
 
    width: 80px; 
 
} 
 
button.second{top:21px;}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 
<div class="super"> 
 
    \t <button>Sign In</button> 
 
    <button class="second">Sign Up</button> 
 
</div> 
 
</body> 
 
</html>

これはあなたを助けることを願っています。

ありがとうございました。

出典

2017-05-17 11:38:05

あなたはブロック要素が互いに横に配置するためにフロートにすることができますについてフロートプロパティを、知るようになるだろう、CSSのドキュメントをお読みください。

http://www.cssbasics.com/を参照してください。このリンクがあなたに役立つことを願っています。

あなたは同じ構造をコーディングする場合、コードは、私は、これはあなたを助けることを願っています

#wrapper { 
 
    background: #4caf50; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
} 
 
#search-bar { 
 
    background: #fff; 
 
    width: 80%; 
 
    float: left; 
 
    min-height:500px; 
 
} 
 
#sidebar { 
 
    width: 20%; 
 
    float: right; 
 
} 
 

 
#sidebar .button{ 
 
    background:#F44336; 
 
    color:#ffffff; 
 
    padding:5px; 
 
    text-align:center; 
 
    margin-bottom:5px; 
 
}

<div id="wrapper"> 
 
    <div id="search-bar">Content</div> 
 
    <div id="sidebar"> 
 
    <div class="button">Sign In</div> 
 
    <div class="button">Sign Out</div> 
 
    </div> 
 
</div>

だろう。

出典

2017-05-17 14:20:42 GVJ

ボタンを右側に配置するにはどうすればよいですか（CSS）

答えて

関連する問題