从昨天开始,我一直在尝试将我的搜索模块与Joomla对齐!的网站使其在移动设备上响应,但它没有按照我想要的方式工作。我只想将此模块对齐到屏幕中心。这是 HTML 代码:
<div class="header-search pull-right">
<div class="search">
<form class="form-inline" method="post" action="/aidet/">
<label class="element-invisible" for="mod-search-searchword"></label>
<input id="mod-search-searchword" class="inputbox search-query" type="search" placeholder=" " size="5" maxlength="200" name="searchword"></input>
<input class="button" type="image" onclick="this.form.searchword.focus();" src="/aidet/templates/protostar/images/searchButton.gif" alt="Buscar"></input>
<input type="hidden" value="search" name="task"></input>
<input type="hidden" value="com_search" name="option"></input>
<input type="hidden" value="111" name="Itemid"></input>
</form>
</div>
</div>
虽然这是我目前使用的媒体查询:
@media only screen and (max-width: 450px) {
.header-search .search-query {
width: 60%;
margin-left: 10%;
}
.input[type="image"] {
width: 5px;
}
}
我尝试按照某些人的建议使用文本对齐,并且还尝试使用边距:0 auto; ,但它没有改变任何东西。另外,我也想调整搜索模块右侧的图像大小,因为它在小屏幕上非常大。
任何帮助/建议将不胜感激。
仅当元素是block
元素并且具有以像素为单位的设置宽度(而不是百分比)时,margin: 0 auto;
才有效,因此请尝试以下操作:
.header-search .search-query {
width: 200px;
margin: 0 auto;
display: block;
}