html - Div Contents を 1 行で？

Question

DIV の内容をすべて 1 行に収めるにはどうすればよいですか? 他の投稿を見たことがありますが、何が間違っているのか理解できますか?

問題のあるページへのリンクは次のとおりです: http://www.heatx.org/productcart/pc/viewCategories.asp?idCategory=2

Answer 1

これをcssファイルの一番下に追加してください

table{
margin: 0 auto;
}

サイトを中央に揃える

あなたのメニューは表示されません！

Answer 2

問題はdiv内の画像が原因だと思います。display:inlineそれらの画像に設定します。

Answer 3

およびに追加float: left;することから開始するリンクを指定します。これはあなたの質問に対処する必要があります。#pcIconBarRight img#pcIconBar a

編集：

次に、これを変更します。

この：

EDIT2: 2 つの div を 1 行に表示するには、次のようにします。

<div style="float: left; width: 200px;">
    <div style="float: left; clear: none;">Total:&nbsp;</div>
    <div style="float: left; clear: none;">159 USD</div>
</div>

注:width: 200px;内側の div が収まる十分な幅を設定する必要があります。そうしないと、2 番目の div が次の行に分割されます。

Answer 4

OPの質問に答えるのが少し遅れました。これは、同じ問題を抱えている他の人に役立ちます。

したがって、すべての要素を 1 行に表示する最も簡単な方法は次のとおりです。

1. 空白を設定: nowrap;overflow-x: auto; 親要素で。
2. すべての子要素にdisplay: inline-blockを設定します。

結果：

フィドル

 <div style="width:100%;white-space:nowrap;overflow-x:auto;border: 1px solid red; border-radius: 10px;padding: 3px;">
   <label style="display: inline-block">Some label </label>
  <select style="display: inline-block">
    <option value="0">aaaaa</option>
    <option value="1">bbbbbb</option>
    <option value="2">ccccccccc</option>
  </select>
  <label style="display: inline-block">Another label: </label>
  <input type="text" style="display: inline-block;width:200px;" />
  <span style="display: inline-block">NOTE: some other text</span>
</div>