I was trying to make a browser independent code with a search bar in it ( this search bar i took from demos.jQuery.com) but now when I am trying to fix the margin percent in the left and right side ( i want it center aligned even when browser width is changed ) I am unable to do that , I am new to CSS can someone help ?
我想做一个独立于浏览器的代码与一个搜索栏(这个搜索栏我从demos.jQuery.com),但现在,当我试图修复左边和右边的保证金比例(我希望它中心对齐即使浏览器宽度改变)我无法做到这一点,我新的CSS可以有人帮助吗?
the code that i made till now is :
我现在做的代码是:
HTML :
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="screen1.css">
</head>
<body>
<div id="header"><p class="p1"><b>Composite<img class="img1" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-128.png" alt="alternate"></b></p></div>
<div id=""main>
<div data-role="main" id="main" class="ui-content">
<form>
<input data-type="search" id="divOfPs-input">
</form>
<div class="elements" data-filter="true" data-input="#divOfPs-input">
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
<p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<p><strong>filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
</div>
</div>
</div>
</body>
</html>
CSS :
CSS:
@CHARSET "ISO-8859-1";
#header
{ position:absolute;
height:40px;
width:100%;
background-color:#D1D3D4;
verticle-align="middle";
left:0;
}
.img1
{
position:relative;
height:13px;
float:right;
padding-right:12%;
}
.p1{
position:relative;
padding-bottom:5%;
padding-left:7%;
width:100%;
}
#main
{
position:absolute;
margin-top:80px;
left:-.3%;
margin-right:2%;
width:98%;
border-right:5%;
}
请参考这个小提琴
5 个解决方案
#1
3
The main problem is that you have defined 98% width without box-sizing: border-box; so padding was pushing content outside of visible area. You have to adjust #main div to:
主要的问题是，您已经定义了98%的宽度而没有装箱:边箱;所以填充将内容推到可见区域之外。你必须将#main div调整为:
#main
{
/* left:-.3%;
margin-right:2%; */
width:100%;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/3je1bk67/3/
小提琴:http://jsfiddle.net/3je1bk67/3/
#2
1
to allign search bar in the middle you just have to add this
对于中间的鳄鱼搜索栏，你只需要添加这个
margin-left: auto;
margin-right: auto;
Hope it helps
希望它能帮助
#3
1
If you want to make your elements centred using margin-right and margin-left try this:
如果你想让你的元素以页边-右和页边-左为中心，试试以下方法:
/* just change the element tag you want to center */
p{
margin-left:10%;
margin-right:10%;
}
That will make all your <p> elements centred, and you can apply it to any element.
这将使所有的
元素居中，您可以将其应用到任何元素。
Take a look at this Demo.
看看这个演示。
#4
0
This answer will help you: How to horizontally center a <div> in another <div>?
这个答案将帮助您:如何在另一个
Also you have a typo in your code: <div id=""main> instead of <div id="main">.
您的代码中也有一个错别字:
#5
0
Jsfiddle
http://jsfiddle.net/3je1bk67/6/
http://jsfiddle.net/3je1bk67/6/
you can resize the browser to see the effect
您可以调整浏览器的大小以查看效果
#main
{
margin:30px 0px 0px 0px;
}
#1
3
The main problem is that you have defined 98% width without box-sizing: border-box; so padding was pushing content outside of visible area. You have to adjust #main div to:
主要的问题是，您已经定义了98%的宽度而没有装箱:边箱;所以填充将内容推到可见区域之外。你必须将#main div调整为:
#main
{
/* left:-.3%;
margin-right:2%; */
width:100%;
box-sizing: border-box;
}
Fiddle: http://jsfiddle.net/3je1bk67/3/
小提琴:http://jsfiddle.net/3je1bk67/3/
#2
1
to allign search bar in the middle you just have to add this
对于中间的鳄鱼搜索栏，你只需要添加这个
margin-left: auto;
margin-right: auto;
Hope it helps
希望它能帮助
#3
1
If you want to make your elements centred using margin-right and margin-left try this:
如果你想让你的元素以页边-右和页边-左为中心，试试以下方法:
/* just change the element tag you want to center */
p{
margin-left:10%;
margin-right:10%;
}
That will make all your <p> elements centred, and you can apply it to any element.
这将使所有的
元素居中，您可以将其应用到任何元素。
Take a look at this Demo.
看看这个演示。
#4
0
This answer will help you: How to horizontally center a <div> in another <div>?
这个答案将帮助您:如何在另一个
Also you have a typo in your code: <div id=""main> instead of <div id="main">.
您的代码中也有一个错别字:
#5
0
Jsfiddle
http://jsfiddle.net/3je1bk67/6/
http://jsfiddle.net/3je1bk67/6/
you can resize the browser to see the effect
您可以调整浏览器的大小以查看效果
#main
{
margin:30px 0px 0px 0px;
}