Question

我有一个带有文字和两个按钮的简单横幅。每个人都在一格之内。我想用两个<div>替换按钮。当我尝试这个时，UI坏了。这是我的代码

#wrapper {
            background-color: gray;
            display: flex;
            padding-left: 90px;
            padding-right: 90px;
        }
        #left {
            padding-top: 33px;
            padding-bottom: 33px;
            flex: 0 0 65%;
            height: 80px;
            line-height: 44px;
        }
        #right {
            padding-top: 45px;
            padding-bottom: 45px;
            flex: 1;
        }
        #button1 {
            height: 70px; 
            width: 240px; 
            margin-right: 20px;
        }
        #button2 {
            height: 70px; 
            width: 128px;
        }

    <div id="wrapper">
        <div id="left">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
        </div>
        <div id="right">
            <input type="button" value="More" id="button1">
            <input type="button" value="Ok" id="button2">
        </div>
    </div>

我想更改为具有常规div的按钮。当我这样做时，按钮不再对齐。您对这个问题有想法吗？

		#wrapper {
			background-color: gray;
		  	display: flex;
			padding-left: 90px;
			padding-right: 90px;
		}
		#left {
			padding-top: 33px;
			padding-bottom: 33px;
		  	flex: 0 0 65%;
			height: 80px;
			line-height: 44px;
		}
		#right {
			padding-top: 45px;
			padding-bottom: 45px;
		  	flex: 1;
		}
		#button1 {
			height: 70px; 
			width: 80px; 
			margin-right: 20px;
            background-color: red;
            text-align: center;
            vertical-align: middle;
            line-height: 70px; 
		}
		#button2 {
			height: 70px; 
			width: 80px;
            background-color: green;
            text-align: center;
            vertical-align: middle;
            line-height: 70px;
		}

<div id="wrapper">
		<div id="left">
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
		</div>
		<div id="right">
			<div id="button1">More</div>
			<div id="button2">Ok</div>
		</div>
	</div>

Answer 1

好吧，这是因为input元素是一个内联元素，而div不是。所以您只需要添加

div＃button1，div＃button2 {display：inline-block;}

Answer 2

您也可以在右列中使用inline-flex显示

#right {
    display: inline-flex;
}

Answer 3

在您使用flexbox时，在父align-items: center元素上使用#wrapper将使其所有子元素垂直居中，因此height上的绝对#left声明为不再需要了。

#wrapper {
  background-color: gray;
  display: flex;
  align-items: center;
  padding-left: 90px;
  padding-right: 90px;
}

#left {
  padding-top: 33px;
  padding-bottom: 33px;
  flex: 0 0 65%;
  line-height: 44px;
}

#right {
  padding-top: 45px;
  padding-bottom: 45px;
  flex: 1;
}

#button1 {
  height: 70px;
  width: 80px;
  margin-right: 20px;
  background-color: red;
  text-align: center;
  vertical-align: middle;
  line-height: 70px;
}

#button2 {
  height: 70px;
  width: 80px;
  background-color: green;
  text-align: center;
  vertical-align: middle;
  line-height: 70px;
}

<div id="wrapper">
  <div id="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
  </div>
  <div id="right">
    <div id="button1">More</div>
    <div id="button2">Ok</div>
  </div>
</div>

此外，您可能希望删除两个元素的顶部和底部padding属性，并在父元素上使用它（以使两者保持相等的间距），但这取决于您的用例。

在同一行上对齐两个按钮，但不能对齐div

3 个答案: