在语义ui中居中搜索框

Question

我试图在语义ui中居中搜索框。栏是居中但搜索结果没有居中。我尝试将中心对齐的类放到输入div但它没有工作在这里是我的代码和我的js fiddle link：

var categoryContent = [{
    category: 'Language',
    title: 'Python'
  },
  {
    category: 'Language',
    title: 'Java'
  },
];

$('.ui.search')
  .search({
    type: 'category',
    source: categoryContent
  });

body {
  background-color: #F2EDF3;
}

.search-bar {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
</head>

<body>
  <div class="ui grid center aligned">
    <div class="sixteen wide column">
      <div class="ui category search ">
        <div class="ui icon input search-bar">
          <input class="prompt" type="text" placeholder="looking for...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您的问题是，因为显示结果的元素具有绝对定位的css属性。这个组合，左边：0，将始终将元素放在左侧。

重置它（通过将其设置为继承），并使用margin：0 auto对中心内容;一切按预期工作。 Here is an example fiddle

.results.visible{
   margin: 0 auto;
   position: inherit;
}

如果它不起作用，请使用更具识别性的CSS，它将覆盖任何其他样式。但请注意，如果html与呈现的内容或css有任何不同，这将无效。这取决于“击败”强制绝对定位的现有规则，从同一个父级开始，然后更具体地说明它（带有引用其他类的.visible）。

.ui.search > .results.visible {
  position: relative;
  margin: 0 auto;
}

如果不工作和作为最后的选择，使用！important，这通常不被认为是一个好的做法（因为它打破了CSS规则的正常流程，并且在造型时可能会导致将来出现问题），但万一你可以'找到适当的标识符，这可能会起作用。

.results.visible{
   margin: 0 auto !important;
   position: inherit !important;
}

你可以试试这个fiddle

Answer 2

.results有位置：绝对和左：0并且它的父亲有位置相对而且它是100％所以正常情况下.results向左移动，因为这是位置绝对在位置相对位置的作用

正如您对任何框架所做的那样，您必须覆盖内容。不要使用！important，因为这是不好的做法而不是你使用在css“specificity”中调用的什么

所以你可以这样做：

.ui.search > .search-bar + .results {
  position: relative;
  margin: 0 auto;
}

https://jsfiddle.net/xwftdv2h/7/

Answer 3

请尝试下面的代码。我已经检查过它应该工作了。

.ui.category.search .results.visible {
    display: inline-block !important;
    width: 50% !important;
    position: unset !important;
}

输出：

在语义ui中居中搜索框

问题描述投票：3回答：3

3个回答

最新问题

在语义ui中居中搜索框

问题描述 投票：3回答：3

3个回答

最新问题

问题描述投票：3回答：3