Question

我怎样才能做到这一点，不仅我的形状很小，而且右侧有侧面，我可以在左侧放置文字。我无法在谷歌上找到任何东西，所以我尝试了这个。我尝试对齐表单，但它只适用于图像。

#questions > .question, #languages > .language{
margin: auto;
overflow: auto;
padding: 8px;
width: 75%;
}
.choices > .choice, #languages > .language{
background: #ffffff;
border-radius: 8px;

opacity: 0.7;
overflow: auto;
padding: 16px;
}
#questions, #languages{
margin-bottom: 48px;
}
#languages > .language{
margin-top: 8px;
}
.language > img{
float: left;
margin-right: 24px;
padding: 
}

这仅适用于SRC不具有实际形式的图像

Answer 1

是的，你可以改变形式，使右边的标签和左边的文字，通过改变整个表格上的比例，然后改变单个元素，使其可读。它在以下代码中进行了演示：

＆＃13;

.flip
{
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}

.fName
{
    width:90px;
    height:30px;
    display: inline-block;
}

.formBox
{
    width:700px;
    height: 500px;
    background:grey;
}

＆＃13;

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
	<div class="flip">
	  <form class="formBox" action = "/cgi-bin/hello_get.cgi" method = "get">
		<div class="fName flip"> 
		First name 
		</div>
            <input type = "text" class="flip" name = "first_name" value = "" maxlength = "100" />
         <br />
		 
		 <div class="fName flip"> 
			Last name 
		 </div>
	 
		
            <input type = "text" class="flip" name = "last_name" value = "" maxlength = "100" />
         <input type = "submit" class="flip" value ="Submit" />
	  </form>
	</div>
   </body>
</html>

＆＃13;

并且要更改表单的大小：声明表单元素的高度宽度，然后使用％measure调整表单内的其他元素。

Answer 2

据我所知，您需要右侧的表格和左侧的文字。然后在制作两个div之后首先在html中创建一个容器。一个用于表单，一个用于内容。然后使用宽度50％并向左浮动;

这里是链接 - JsBin

HTML：

<div class="container">
  <div class="content">
    this is the content part
  </div>
  <div class="form">
    <form>
      <input type="text"/>
      <input type="text"/>
      <input type="text"/>
      <input type="text"/>
    </form>
  </div>
  </div>

css：

*{
  box-sizing: border-box;
}
.content,.form{
  width: 50%;
  float: left;
  border: 1px solid red;
  display: inline-block;
}
.form input{
  display: block;
}

有没有办法改变我制作的盒子形状的大小，当我留下侧面文本时，表格也可以在右边吗？

2 个答案: