将两个div对齐

Question

好吧，所以这可能是我忽略了一些基本的东西，但我一直在努力让这两个div正确地排列在一起。这就是它现在看起来的样子，并且最佳地，“好”将与标签水平对齐，但我不能因为我的爱而弄清楚为什么它会漂浮在那样的顶部。

这是我的CSS：

#wellnum {
    float: left;
}

#wells {

}

#wellwrapper {
    overflow: auto;
}

这是我的HTML：

<div id="wellwrapper">
    <div id="wellnum">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#well">1</a>
            </li>
            @for (int i = 2; i < 13; i++)
            {
                <li>
                    <a href="#well">@i</a>
                </li>
            }
        </ul>
    </div>
    <div id="wells">Well</div>
</div>

任何提示？

Answer 1

尝试删除margin或nav-tabs

中使用的ul

检查下面的代码段。

ul {
  margin: 0;
  margin-right: 10px;
}
ul li {
  list-style: none;
  display: inline;
}
#wellnum {
  float: left;
  clear: both;
}
#wellwrapper {
  overflow: auto;
}

<div id="wellwrapper">
  <div id="wellnum">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#well">1</a>
      </li>
      <li>
        <a href="#well">2</a>
      </li>
      <li>
        <a href="#well">3</a>
      </li>
      <li>
        <a href="#well">4</a>
      </li>
      <li>
        <a href="#well">5</a>
      </li>
    </ul>
  </div>
  <div id="wells">Well</div>
</div>

Answer 2

添加bellow css

#wells {
    float: left;
}

http://jsfiddle.net/avgocvg8/2/

Answer 3

你应该尝试这样做以内联你的两个部分 -

＆＃13;

＆＃13;

*{margin: 0;padding:0;}
#wellnum {
	float: left;
}
#wellnum  ul li{
 float: left;
 list-style: none;
}

#wells {
	float: left;
}

#wellwrapper {
    overflow: auto;
}

＆＃13;

<div id="wellwrapper">
    <div id="wellnum">
          <ul class="nav nav-tabs">
            <li class="active">
                <a href="#well">1</a>
            </li>
            @for (int i = 2; i < 13; i++)
            {
                <li>
                    <a href="#well">@i</a>
                </li>
            }
        </ul>
    </div>
    <div id="wells">Well</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果您希望您的商品水平对齐，只需使用：

{{1}}

Answer 5

你可以尝试这个：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.a);
    listViewRoom = ( ListView ) findViewById( R.id.listView2);
    getVal();
}

public void getVal(){
    //get value from json
    new SamplePeopleFragment();//in these function it is not going 
}

DEMO

Answer 6

您也可以尝试使用浮井，并在父级上使用clearfix。

#wellnum {
  float: left;
}

#wells {
  float: left;
}

#wellwrapper {
  overflow: auto;
  zoom: 1;
}

#wellwrapper:before,
#wellwrapper:after  { content: ""; display: block; clear: both; height: 0; visibility: hidden; }

Answer 7

试试这个。

*{margin: 0;padding:0;}
.clearFix { clear:both;}
#box {
    float: left;
}