Q&A
ボタンが階段状にずれる、という状況がピンとこないので、スクリーンショットを質問に含めるか、jsfiddle や codepen ですぐに試せるようにできませんか?
CSSのコードを「```css」と「```」で囲ってください。
flex grid を試してみたコードも開示してください。
実現したいこと
textに入力された要素の右端にボタンを表示したいが、textを追加するにつれてボタンが階段上にずれてしまう
前提
cssをこのように記入しています。
ul li .delete-btn{
border-radius: 8px;
background-color: #cc3300;
color: white;
background-size: cover;
margin: 0 5px 0 auto;
padding: 4px 16px;
float: right;
一つ目の要素の時はボタンが左によっているのですが、
要素が増えるにつれてボタンが階段のように左に流れて崩れます。
入力された文字の長さに関係なくボタンは一定の場所にしておきたいです。
ここに質問の内容を詳しく書いてください。
何を加えれば横流れが治るのでしょうか
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
Javascript
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="src/base.css"> 6 <title>lesson08 Todoリスト</title> 7</head> 8<body> 9 <!-- 入力エリア --> 10 <div class="input-area"> 11 <input id="add-text" placeholder="Todoを入力" required="required" /> 12 <button id="add-button">追加</button> 13 </div><!-- input-area --> 14 15 <div class="container"> 16 <!-- 作業中エリア --> 17 <div class="incomp-area"> 18 <p class="area-title">タスク</p> 19 <ul id="incomp-area-list"> 20 </ul> 21 </div><!-- incomp-area --> 22 23 <!-- 完了エリア --> 24 <div class="comp-area"> 25 <p class="area-title">完了</p> 26 <ul id="comp-area-list"> 27 </ul> 28 </div><!-- comp-area --> 29 </div><!-- container --> 30 31 <script> 32 33 const addText = document.querySelector('#add-text'); 34 const button = document.querySelector('#add-button'); 35 const incompList = document.querySelector('#incomp-area-list'); 36 button.addEventListener('click', function() { 37 const text = document.createTextNode(addText.value); 38 document.getElementById("add-text").value = ""; 39 const li = document.createElement('li'); 40 //作成したliタグに入力した値textを追加 41 li.appendChild(text); 42 incompList.appendChild(li); 43 44 //戻るボタン 45 const returnBtn=document.createElement('span'); 46 returnBtn.classList.add('return-btn'); 47 returnBtn.innerHTML = '戻る'; 48 li.appendChild(returnBtn); 49 returnBtn.style.display = "none"; 50 51 52 53 //完了ボタン 54 const check = document.createElement('span'); 55 check.classList.add('complete-btn'); 56 check.innerHTML = '完了'; 57 li.appendChild(check); 58 59 //削除ボタン 60 const trash = document.createElement('span'); 61 trash.classList.add('delete-btn'); 62 trash.innerHTML = '削除'; 63 li.appendChild(trash); 64 65 //削除ボタンを押した時の処理 66 trash.addEventListener('click', function() { 67 this.parentNode.remove(); 68 }); 69 70 //完了ボタンを押して完了BOXに移動する処理 71 72 check.addEventListener('click',function(){ 73 const compArea=document.querySelector('#comp-area-list'); 74 compArea.appendChild(this.parentNode); 75 76 77 //完了ボタン、削除ボタンの非表示 78 79 check.style.display = "none"; 80 trash.style.display = "none"; 81 returnBtn.style.display = "inline"; 82 }); 83 84 85 //戻るボタンを押してタスクBOXに要素を戻す 86 87 returnBtn.addEventListener('click',function(){ 88 incompList.appendChild(this.parentNode); 89 check.style.display = "inline"; 90 trash.style.display = "inline"; 91 returnBtn.style.display = "none"; 92 93 94 }); 95 96 }); 97 98 </script> 99</body> 100</html>
試したこと
ここに問題に対して試したことを記載してください。
打開策としてfloatを使わずに、display: inline-block; や、flex、gridを使用した方がいいという記事を見たので、使用してみましたが、どうしてもcssがズレます。
使い所が間違っているのでしょうか
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
cssはこのように記載しています。
body {
font-family: sans-serif;
}
input {
border-radius: 8px;
border: none;
padding: 6px 16px;
outline: none;
width: 240px;
}
button {
border-radius: 16px;
border: none;
margin: 8px;
padding: 4px 16px;
}
button:hover {
background-color: #ff7fff;
color: #fff;
cursor: pointer;
}
.input-area {
background-color: #c1ffff;
height: 44px;
margin: 8px;
padding: 8px;
border-radius: 8px;
}
.container {
display: flex;
}
.incomp-area {
background-color: #c6ffe2;
width: 50%;
min-height: 200px;
margin: 8px 0 8px 8px;
padding: 8px;
border-radius: 8px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.comp-area {
background-color: #ffffe0;
width: 50%;
min-height: 200px;
margin: 8px;
padding: 8px;
border-radius: 8px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.area-title {
text-align: center;
padding-bottom: 8px;
margin-top: 0;
font-weight: bold;
color: #666;
border-bottom: solid 1px black;
}
.incomp-area-list-detail{
display: flex;
justify-content: center;
align-items: center;
}
.incomp-area-list-detail>button:nth-of-type(1){
margin-left: auto
}
ul{
padding-left:0
}
ul li {
list-style: none;
overflow-wrap: break-word;
}
ul li .complete-btn{
border-radius: 8px; background-color: #4D89FF; color: white; background-size: cover; margin: 0 5px 0 auto; padding: 4px 16px; float: right;
}
ul li .complete-btn:hover{
background-color: #9ACFFF;
cursor: pointer;
}
ul li .delete-btn{
border-radius: 8px;
background-color: #cc3300;
color: white;
background-size: cover;
margin: 0 5px 0 auto;
padding: 4px 16px;
float: right;
}
ul li .delete-btn:hover{
background-color: #FF6A6A;
cursor: pointer;
}
ul li .return-btn{
border-radius: 8px;
background-color: #03D00B;
color: white;
padding: 4px 16px;
float: right;
margin: 0 5px 0 auto;
}
ul li .return-btn:hover{
background-color: #95FF99;
cursor: pointer;
}
コメントありがとうございます。
説明が足りずすみません。
せっかく質問していただきましたが、liの要素にpaddingを指定してなかったことにより、隙間がキツキツでsccが崩れていたみたいです。
paddingで隙間を作ることによって改善されました。
解決したようで良かったですが、float はトラブルの元なので使用をやめることを強くオススメしますよ。
そうなのですね。
floatを使わないやり方も模索してみます！！
回答1件
0
自己解決
li要素にpaddingを指定し忘れていたみたいです。
間隔をあけたら解決しました。
```ul li { list-style: none; overflow-wrap: break-word; padding: 15px 0 15px 0; }
投稿2023/10/23 07:16
総合スコア13
あなたの回答
tips
プレビュー
