Question

基本上，我需要获得两个具有两个不同输入的列。但他们需要在同一行，并且都要响应。

第一个是：

第二个是：看起来如何： Looks

它的外观： need

我认为我犯了一些愚蠢的错误。

  <body>
<div id="menu1">
<div id="menu2">
<h1>
Treatments:
</h1>

<hr>


   <div class="treatments">
   <div class="options">
    <p> Item 1  </p>
    <p> Item 1  </p>
    <p> Item 1  </p>
    <p> Item 1  </p>
    <p> Item 1  </p>
    <p> Item 1  </p>
    <p> Item 1  </p>    
   <div class="prices">
   <p> $NAN </p>
    <p> $NAN    </p>
     <p> $NAN   </p>
      <p> $NAN  </p>
       <p> $NAN </p>
      <p> $NAN  </p>
         <p> $NAN         </p>
   </div>
   </div>
   </div>
   </div>
   </div>

CSS：

div#menu1{
        position: relative;
        max-width: 814px;
        /*background:rgba(123,123,123,0.5);*/
        background:#ccc;
        padding: 15px;
        margin: 0 auto;
        text-align:center;
        border-radius:12px;
        /* shadow */
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        /* shadow*/
        }


        div#menu1 
        div#menu2{
        position: relative;
        max-width: 727px;
        padding: 36px;
        border: 7px solid #000;
        border-radius:5px;
        }

        hr {
        border: none;
        height: 5px;
        background:#000000;
        /* width:50%;*/
        }

        .treatments{


         }

        .options{
        text-align:left; !important

        }


       .prices{
          text-align:right;!important
         }

Answer 1

你的html应该是第一个可以理解/可读的，没有任何风格。名称+价格合在一起:)）

列表示例

ul {
  border:solid 10px;
  padding:0.25em;
  width:400px;
  line-height:1.6em;
  font-size:2em;
  font-weight:bold;
  border-radius:0.5em;
}
li {
  display:block;
  }
li em {
  float:left;
  width:50%;
  }

<ul>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
 </ul>

css中的多列具有不同的输入

1 个答案: