HTMLコードでアイテムを適切に並べる問題が発生しています。なぜ彼らが私が望むように並んでいないのか、私にはわかりません。私はこのサイトをデザインしたのではなく、追加するだけです。<style>また、これはワードプレスページであり、サイト全体のcssを変更するアクセス権がないため、アクセスできないページヘッダーにタグが含まれているため、インラインcssを使用していました。申し訳ありませんが、質問を投稿する前に CSS を引き出す必要があったので、従いやすくなりました。しかし、私はプログラマーであり、Web デザイナーではありません。ID を複数回使用してはならないことを常に覚えているわけではありません。
最初の問題は、ウェブサイトに 4 つのアイテムを並べることです。2 つのテキスト文字列と画像、および水平方向の罫線があります。最初の文字列を左に揃え、2 番目の文字列を右に揃え、画像を右に揃えます。次に、<hr>そのすぐ下に配置したいと思います。最初の文字列を div に配置し、2 番目の文字列を画像とともに別の div に配置して、これを実行しようとしました。私が得たのは3行でした。1 行の左に位置合わせされた最初の文字列。2 番目の文字列は、2 行目の画像とその下の行の画像で右揃えされました<hr>。HTML属性とCSSでさまざまな配置設定を試してみましたが、最初の文字列の後の改行を取り除くことができないようです。私は何が欠けていますか？私はこれが簡単であるべきだと知っていますか？それはワードプレスのcssでしょうか？
私の2番目の問題は似ています。画像が入ったテーブルセルがあります（ボックス内のx）。画像を正しく揃えることはできますが、td の上部に垂直に揃えるのに問題があります。私は何が欠けていますか？
以下に HTML の例をいくつか示します。
CSS:
table#one {
width=900px;
margin-left: auto;
margin-right: auto;
}
div#div1 {
font-size: 1em;
line-height: 1em;
font-weight: bolder;
padding: 0px;
}
td#td1 {
border: none;
background-color: #f8d3cf;
width:125px;
height:80px;
border-spacing: 10px;
padding:0;
}
div#div2 {
padding:0;
vertical-align:top;
}
a#a1 {
padding: 0px;
}
img#img1 {
padding: 0px;
}
td#td3 {
border: none;
width:10px;
}
td#td4 {
border: none;
font:.6em Arial, Helvetica, sans-serif;
width:125px;
height:20px;
}
HTML:
<table id="one">
<tr>
<td>
<div id="div1">My Color Library</div>
<div align="right" class="removeall">
<a href="colors">
<img src="http://www.2100computerlane.net/workingproject/images/x-button.png" />
<bold> Remove All</bold>
</a>
</div>
<HR/>
</p>
<div class="mycolor">
<table><!--width="900px" -->
<tr>
<td id='td1' align="right" valign="top"><a href="f8d3cf" id="a1"><img src="http://www.2100computerlane.net/workingproject/images/x-button.png" /></a></div></td>
</tr>
<tr>
<td id="td4">Desert Warmth<br/>70YR 56/190 A0542</td>
</tr>
</table>
</div>
</td>
</tr>
</table>