Question

我有以下代码：

＆＃13;

body{
			margin:0;
		}
		#navbar{
			background-color:red;
			height:70px;
			
			width:80%;
			margin:auto;
		}
		#search{
			width:100%;
		}
		#element1{
			height: 100%;
			float:left;
			background-color:green;
			display: table;
		}
		#element2{
		    height: 100%;
			float:left;
			background-color:yellow;
			display: table;
		}
		.v_center{
			display: table-cell;
			vertical-align: middle;
			border-style: solid;
			width:100%;
		}

＆＃13;

<!DOCTYPE HTML>
<HEAD>
	<link rel="stylesheet" href="style.css" />
</HEAD>
<BODY>
	<div id="navbar">
		<!--<img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/>
		<input type="search" id="search"/> -->
		<div id="element1" >
			<div class="v_center">
				test
			</div>
		</div>
		<div  id="element2" >
			<div class="v_center">
				<input type="search" id=#search/>
			</div>
		</div>
		<br style="clear:both;"/>
	</div>
</BODY
</HTML>

＆＃13;

这是结果：

如何制作宽度为100％的＃element2，如下所示：

我想我需要摆脱“浮动：离开”，但没有它，它们就不会在彼此旁边对齐。有人能帮助我吗？

Answer 1

为每个元素使用width

body {
  margin: 0;
}

#navbar {
  background-color: red;
  height: 70px;
  width: 80%;
  margin: auto;
}

#search {
  width: 100%;
}

#element1 {
  width: 5%;
  height: 100%;
  float: left;
  background-color: green;
  display: table;
}

#element2 {
  width: 95%;
  height: 100%;
  float: left;
  background-color: yellow;
  display: table;
}

.v_center {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  width: 100%;
}
.v_center #search{width:100%;}

<!DOCTYPE HTML>
<HTML>
<HEAD>
  <link rel="stylesheet" href="style.css" />
</HEAD>

<BODY>
  <div id="navbar">
    <!--<img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/>
		<input type="search" id="search"/> -->
    <div id="element1">
      <div class="v_center">
        test
      </div>
    </div>
    <div id="element2">
      <div class="v_center">
        <input type="search" id="search" />
      </div>
    </div>
    <br style="clear:both;" />
  </div>
</BODY> </HTML>

Answer 2

这是最好的方法。使用flex而不是table。

检查您的HTML，您以错误的方式定义了ID。应该是这样的：

<input type="search" id="search">

我已编辑了您的代码段。请检查

＆＃13;

* {
box-sizing: border-box; //add this
}
body {
  margin: 0;
}

#navbar {
  background-color: red;
  height: 70px;
  width: 80%;
  margin: auto;
}

#search {
  width: 100%;
}

#element1 {
  height: 100%;
  float: left;
  background-color: green;
  //display: table;
  //width: 20%;
}

#element2 {
  height: 100%;
  background-color: yellow;
  overflow: hidden;
  //display: table;
  //width: 80%;
  
}

.v_center {
  //display: table-cell;
  //vertical-align: middle;
  border-style: solid;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

＆＃13;

<!DOCTYPE HTML>

<HEAD>
  <link rel="stylesheet" href="style.css" />
</HEAD>

<BODY>
  <div id="navbar">
    <!--<img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/>
		<input type="search" id="search"/> -->
    <div id="element1">
      <div class="v_center">
        test
      </div>
    </div>
    <div id="element2">
      <div class="v_center">
        <input type="search" id="search">
      </div>
    </div>
    <br style="clear:both;" />
  </div>
</BODY </HTML>

＆＃13;

HTML - 如何将浮动元素的宽度设置为其父div的100％？

2 个答案: