HTML – 主页多语言CSS对齐问题

当我们切换到替代语言(更改为意大利语以进行测试)时,我们的网站 Batoku的主页面存在一些小的格式问题.

1)在更改语言时,“交换”文本不会在箭头之间居中.
(#wrap-main#main-home #items a #swap)

a#swap {
    color: #449AC2;
    font-size: 26px;
    font-weight: bold;
    left: 467px;
    max-width: 135px;
    position: absolute;
    top: 194px;
    word-wrap: break-word;
}

2)页脚不居中,看起来不太好,当语言发生变化时,每行的项目不一致,如果你第一次喜欢这个页面,那么就没有空间可以写评论等.

3)如果任何一种语言都有非常大的文本,则标题可能会完全覆盖整个地方..在< li id =“add-item”>下进行测试修改跨度说< span>我会破坏你的标题! < /跨度> (请使用firebug)

谢谢

解决方法

1)关于交换,有一个固定的左侧位置,这意味着它将始终保持在那里.最好是通过宽度为100%的div包裹; text-align:center;或其他类似的东西以使文本居中,而不是元素本身.

2)关于页脚. ul有固定的宽度.你应该删除它,添加’text-align:center’,从li元素中删除浮动并使它们显示:inline;

3)对于标题你应该责怪设计师. :)他们不是程序员,但至少他们应该问自己“如果有更多链接怎么办?”或者“一旦语言发生变化会发生什么?”,他们应该在框架外思考一下.这里没有任何东西可以阻止现场制动.你可以把它变成绝对的,但一旦它变大,它就会开始越过文本字段.那也不行.您可以使用某种类型的javascript来检查它是否破坏了元素并将某种类应用于导航以减少字体大小或更改元素的位置.

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些